位置: 编程技术 - 正文
jQuery实现6位数字密码输入框(jquery操作数组)
编辑：rootadmin推荐整理分享jQuery实现6位数字密码输入框(jquery操作数组)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery 设置值,jquery 设置元素位置,如何使用jquery设置一个属性值,如何使用jquery设置一个属性值,jquery 设置值,jquery 设置value,如何使用jquery设置一个value值为hello,jquery number,内容如对您有帮助，希望把文章链接给更多的朋友！
下个月就要过年了，感觉有点瞎忙。翻了翻博客，感觉这个月都在打酱油啊。借口那么多，其实真的有点懒了，呵呵！
我争取在放假前，将自我总结以及来年计划发出来，把自己打造为勉族，不然真要浑噩度日了。
前几天，项目有个功能和某宝购物支付密码的输入框有点类似，就自己写了这篇博文，权当总结笔记吧。
??掳胩炝耍?苯由洗?耄?/p>
结构层：
通过结构层，分析下大概思路：
本功能就是一个真实输入框和6个假输入框的故事。
将真实输入框和假输入框容器都定位重叠，注意将真实输入框的优先级设置较高，不然就输入不了咯。 为了做成看似假输入框在输入，则将真实输入框隐藏，用opacity隐藏哦。 用户输入时，通过行为层js将真实输入框的值分配给每个假输入框。 输入的同时，控制假输入框光标的效果，我用了一张某宝的图片做成的，实际上，假输入框是没有获取到焦点的。注意：
这里真实输入框的type类型用的是tel，而不是number。因为后者会生成小箭头呀，前者在用户点击输入框时app判断type是tel就会弹出数字输入键盘更好。
表现层：
样式里面就一个定位重叠，一个隐藏真实输入框，我就不想多唠叨了。css我用sass写的，转译css有点乱，博友们将就看看吧。
行为层：
因为tel类型，在pc端兼容问题，所以加了点正则。
本身没有什么复杂的东西，我就不多??铝耍?枰?⒁獾牡胤蕉技幼⑹土恕?/p>
附上完整代码：
标签: jquery操作数组
本文链接地址:https://www.jiuchutong.com/biancheng/374014.html 转载请保留说明！