JS实现身份证输入框的输入效果


Posted in Javascript onAugust 21, 2017

实现如图所示的输入效果:

JS实现身份证输入框的输入效果

实现这种效果,比较简单的一种方式就是给一个input添加一个背景图片,然后通过设置字间距来达到效果。

代码:

html:

<input type="text" maxlength="8" class="idInput" onkeyup='this.value=this.value.replace(/\D/gi,"")'>

css:

.idInput{
 width: 24.95rem;
 height: 4.7rem;
 background: url(../img/input_bg.png) center / contain no-repeat;
 font-size: 1.6rem;
 color: #1b1920;
 letter-spacing: 2.2rem; //最主要的部分,字间距
 padding-left: 1.2rem;
}

这样的话就可以实现输入框输入效果了。

还有一种实现思路是,八个input标签排列,使用keyup事件,当一个input输入完成以后,光标自动跳到下一个input。在实现过程中,我发现,虽然输入可以实现,但是删除的时候没有办法删除,所以就没有使用这种方法。

总结

以上所述是小编给大家介绍的JS实现身份证输入框的输入效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript与CSS复习(二)
Jun 29 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
引用外部脚本时script标签关闭的写法
Jan 20 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
Vue自定义指令使用方法详解
Aug 21 #Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 #Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 #Javascript
JavaScript中各数制转换全面总结
Aug 21 #Javascript
JQuery判断正整数整理小结
Aug 21 #jQuery
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 #Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 #Javascript
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
vuex存储token示例
2019/11/11 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
js实现点击选项置顶动画效果
2020/08/25 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Python 的AES加密与解密实现
2019/07/09 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Django 请求Request的具体使用方法
2019/11/11 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
上班早退检讨书
2014/01/09 职场文书
小学运动会表扬稿
2014/01/19 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Mysql 一主多从的部署
2022/05/20 MySQL