如何实现身份证输入框的输入效果
2017-08-21 11:59
169 查看
实现如图所示的输入效果:
![](https://img-blog.csdn.net/20170821100039425?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvWmF5bmFoTHk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
实现这种效果,比较简单的一种方式就是给一个input添加一个背景图片,然后通过设置字间距来达到效果。
代码:
html:
css:
这样的话就可以实现输入框输入效果了。
还有一种实现思路是,八个input标签排列,使用keyup事件,当一个input输入完成以后,光标自动跳到下一个input。在实现过程中,我发现,虽然输入可以实现,但是删除的时候没有办法删除,所以就没有使用这种方法。
对于这个功能的实现有了解的朋友或者有其他更好的实现方式,欢迎在评论中赐教。
实现这种效果,比较简单的一种方式就是给一个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实现身份证输入框的输入效果
- jquery实现微博文字输入框 输入时显示输入字数 效果实现
- DataGridView如何实现自动定位效果,比如我输入个数字N就能马上定位到第N行,而且滚动条也会跟着滚动!
- 如何用JavaScript,jQuery,Zepto来实现输入框只能输入纯数字
- 如何实现在命令行输入pwd时显示出ifconfig的效果
- android输入框EditText输入银行卡,输入手机,输入身份证格式化的实现
- [Javascript]如何在HTML中实现点击input输入框(获得焦点)后默认提示消失的效果
- 实现textbox对输入内容的自动检索功能,效果相当于百度首页的文本输入框
- 如何实现Android4.1语音输入的纠错和一键删除效果
- 关于输入框input如何实现只可以选择不可以键盘输入
- 如何实现可以输入文字可以插入图片的输入框?如图:
- Canvas如何实现图像的居中、平铺效果
- OJ 如何实现一个按输入顺序排列的映射?
- 如何实现鼠标悬停图片放大的效果。
- 实现网页中的搜索输入框效果 onfocuse onblur js 验证手机号 座机区号
- 如何让IOS中的文本实现3D效果
- activity跳转的时候如何实现动画效果
- s60如何实现字符滚动效果
- jquery autocomplete 自己实现div达到输入提示效果
- PHP如何实现文件写入前追加,如依次写入"我 爱 你",而实现的效果是"你爱我"