当前位置：首页 > 资讯 > 技术文档

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

时间：2022-07-15 07:58 编辑：来源：阅读：
扫一扫，手机访问

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

实现如图所示的输入效果： [img]http://files.jb51.net/file_images/article/201708/2017082115595227.png[/img] 实现这种效果，比较简单的一种方式就是给一个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。在实现过程中，我发现，虽然输入可以实现，但是删除的时候没有办法删除，所以就没有使用这种方法。 [b]总结[/b] 以上所述是小编给大家介绍的JS实现身份证输入框的输入效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：js实现按座位号抽奖
下一篇：有趣的JavaScript数组长度问题代码说明

资讯排行榜
更多>>