jQuery实现6位数字密码输入框_jQuery六位密码资源-CSDN文库

147 浏览量 2020-12-28 23:28:52 上传评论收藏 62KB PDF 举报

资源推荐

资源详情

资源评论

jQuery实现实现6位数字密码输入框位数字密码输入框

下个月就要过年了，感觉有点瞎忙。翻了翻博客，感觉这个月都在打酱油啊。借口那么多，其实真的有点懒了，呵呵！

　　我争取在放假前，将自我总结以及来年计划发出来，把自己打造为勉族，不然真要浑噩度日了。

　　前几天，项目有个功能和某宝购物支付密码的输入框有点类似，就自己写了这篇博文，权当总结笔记吧。

　　啰嗦半天了，直接上代码：

结构层：结构层：

<div>

<div>请在下方输入6位数字</div>

<div class="ipt-box-nick">

<input type="tel" maxlength="6" class="ipt-real-nick"/>

<div class="ipts-box-nick">

<div class="ipt-fake-box">

<input type="text" >

<input type="text" >

<input type="text" >

<input type="text" >

<input type="text" >

<input type="text" >

</div>

</div>

<div class="ipt-active-nick"><img src="http://huoche.7234.cn/images/jb51/tmlda3wmytl.gif"></div>

</div>

</div>

通过结构层，分析下大概思路：大概思路：

本功能就是一个真实输入框和6个假输入框的故事。

将真实输入框和假输入框容器都定位重叠，注意将真实输入框的优先级设置较高，不然就输入不了咯。

为了做成看似假输入框在输入，则将真实输入框隐藏，用opacity隐藏哦。

用户输入时，通过行为层js将真实输入框的值分配给每个假输入框。

输入的同时，控制假输入框光标的效果，我用了一张某宝的图片做成的，实际上，假输入框是没有获取到焦点的。

注意：注意：

这里真实输入框的type类型用的是tel，而不是number。因为后者会生成小箭头呀，前者在用户点击输入框时app判断type是tel

就会弹出数字输入键盘更好。

表现层：表现层：

.ipt-box-nick {

height: 40px !important;

line-height: 40px !important;

position: relative !important; }

.ipt-box-nick .ipt-real-nick {

position: absolute !important;

top: 0 !important;

left: 0 !important;

width: 100%;

height: 40px !important;

line-height: 40px !important;

opacity: 0 !important;

z-index: 3 !important; }

.ipt-box-nick .ipts-box-nick {

position: absolute !important;

top: 0 !important;

left: 0 !important;

z-index: 1 !important;

width: 100%;

height: 40px !important;

line-height: 40px !important;

overflow: hidden; }

.ipt-box-nick .ipts-box-nick .ipt-fake-box {

height: 40px !important;

line-height: 40px !important;

display: flex !important;

justify-content: space-between !important; }

.ipt-box-nick .ipts-box-nick .ipt-fake-box input {

width: 40px !important;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38697328

粉丝: 6
资源: 885

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip