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实现window.print()去除页眉页脚
Dec 30 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 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
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP getName()函数讲解
2019/02/03 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
原生js实现日期联动
2015/01/12 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
详解基于webpack2.x的vue2.x的多页面站点
2017/08/21 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
django-csrf使用和禁用方式
2020/03/13 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
水务局局长岗位职责
2013/11/28 职场文书
科级干部考察材料
2014/02/15 职场文书
离职保密承诺书
2014/05/28 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
服务明星事迹材料
2014/12/29 职场文书
会计做账心得体会
2016/01/22 职场文书