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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
JS中的模糊查询功能
Dec 08 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
提问的智慧
2006/10/09 PHP
PHP学习之PHP变量
2006/10/09 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
零基础写python爬虫之urllib2使用指南
2014/11/05 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python实现多张图片拼接成大图
2019/01/15 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
先进班级集体事迹材料
2014/01/30 职场文书
保险公司晨会主持词
2014/03/22 职场文书
就业协议书范本
2014/10/08 职场文书
学习保证书100字
2015/02/26 职场文书
Mysql开启外网访问
2022/05/15 MySQL