这篇文章主要介绍了JS实现身份证输入框的输入效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
实现如图所示的输入效果:
实现这种效果,比较简单的一种方式就是给一个input添加一个背景图片,然后通过设置字间距来达到效果。
代码:
html:
css:
.idInput{ width: 24.95rem; height: 4.7rem; background: url(../img/input_bg.png-600) center / contain no-repeat; font-size: 1.6rem; color: #1b1920; letter-spacing: 2.2rem; //最主要的部分,字间距 padding-left: 1.2rem; }
这样的话就可以实现输入框输入效果了。
还有一种实现思路是,八个input标签排列,使用keyup事件,当一个input输入完成以后,光标自动跳到下一个input。在实现过程中,我发现,虽然输入可以实现,但是删除的时候没有办法删除,所以就没有使用这种方法。
总结
以上就是JS实现身份证输入框的输入效果的详细内容,更多请关注0133技术站其它相关文章!