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

网络编程 2021-07-04 18:33www.168986.cn编程入门
这篇文章主要介绍了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实现身份证输入框的输入效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by

长沙网络推广|微博营销|长沙seo优化|视频营销|长沙网络营销|微信营销|长沙网站建设|口碑营销|软文营销