JavaScript仿支付宝6位数字密码输入框

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

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

结构层：

差异请在下方输入6位数字/div class=' ipt-box-nick '输入类型=' tel ' max length=' 6 ' class=' ipt-real-nick '/div class=' ipt-box-nick ' div class=' ipt-false-box '输入类型=“文本”输入类型=“文本”输入类型=“文本”输入类型=“文本”输入类型=“文本”输入类型=' text '/div/div class=' ipt-active-nick ' img src=' http :335999通过结构层，分析下大概思路：

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

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

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

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

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

注意：

这里真实输入框的类型类型用的是电话，而不是第一名。因为后者会生成小箭头呀，前者在用户点击输入框时应用判断类型是电话就会弹出数字输入键盘更好。

表现层：ipt-box-nick { height: 40px！重要；线高： 40px！重要；位置：相对！重要；} .尼克ipt-real-nick {位置：绝对！重要；top: 0！重要；左转： 0!重要；宽度： 100%;高度： 40px！重要；线高： 40px！重要；opacity: 0！重要；z-index: 3！重要；} .尼克ipts-box-nick { position:绝对！重要；top: 0！重要；左转： 0!重要；z-index: 1！重要；宽度： 100%;高度： 40px！重要；线高： 40px！重要；飞越：隐藏；} .尼克ipts-box-尼克ipt-假盒子{ height: 40px！重要；线高： 40px！重要；显示： flex！重要；正义-内容：空间-之前！重要；} .尼克ipts-box-尼克ipt-假盒输入{ width: 40px！重要；高度： 40px！重要；border: 1px实心# D7D7D7！重要；color: #810213！重要；字体粗细：加粗！重要；font-size: 18px！重要；文本-对齐：中心！重要；划水： 0!重要；} .尼克ipt-active-nick { width: 40px！重要；高度： 40px！重要；线高： 40px！重要；文本对齐：中心；绝对位置：重要；top : 0；左： 0；z-index : 2；} .尼克ipt-active-nick img {垂直-对齐：中间；}样式里面就一个定位重叠，一个隐藏真实输入框，我就不想多唠叨了css。我用厚颜无耻写的，转译钢性铸铁有点乱，博友们将就看看吧。

行为层：

$('.ipt-real-nick ').on('input '，function(){//console。日志($(this)).val())；var $input=$(' .ipt-假盒输入');if(！$(这个)。val()){//无值光标顶置$('.ipt-active-nick ').css('left '，$input.eq(0).偏移量()。left-parseInt($(').ipt-box-nick ').父项()。CSS('左填充')' px ')；} if(/^[0-9]*$/g.test($(this).val())){//有值只能是数字//console.log($(this).val())；var pwd=$(this).val().trim()；for (var i=0，len=pwd.length我透镜；i ) { $input.eq(i).val(pwd[I])；if($input.eq(i)).下一个()。长度){//模拟光标，先将图片容器定位，控制左边的值而已$('.ipt-active-nick ').css('left '，$ input。方程式(一)^ 1 .偏移量()。left-parseInt($(').ipt-box-nick ').父项()。CSS('左填充')' px ')；} } $input.each(function() {//将有值的当前投入后的所有投入清空定义变量索引=$(这个).index()；if (index=len) { $(this).val(" ")；} });if (len==6) { //执行其他操作console.log('输入完整，执行操作');} }else{//清除英国压力单位中的非数字，返回纯数字的值var arr=$(this).val().匹配(/\ d/g)；$(这个)。瓦尔($(这个).val().切片(0，$(此)).val().(arr[arr]的最后索引。长度-1])1)；//console.log($(this).val())；} });因为电话类型，在个人计算机端兼容问题，所以加了点正则。

本身没有什么复杂的东西，我就不多啰嗦了，需要注意的地方都加注释了。

附上完整代码：

！DOCTYPE html html head meta charset=' UTF-8 '标题仿支付宝数字密码输入框/title样式ipt-box-nick { width :300 px；高度： 40px！重要；线高： 40px！重要；位置：相对！重要；} .尼克ipt-real-nick {位置：绝对！重要；top: 0！重要；左转： 0!重要；宽度： 100%;高度： 40px！重要；线高： 40px！重要；opacity: 0！重要；z-index: 3！重要；} .尼克ipts-box-nick { position:绝对！重要；top: 0！重要；左转： 0!重要；z-index: 1！重要；宽度： 100%;高度： 40px！重要；线高： 40px！重要；飞越：隐藏；} .尼克ipts-box-尼克ipt-假盒子{ height: 40px！重要；线高： 40px！重要；显示： flex！重要；正义-内容：空间-之前！重要；} .尼克ipts-box-尼克ipt-假盒输入{ width: 40px！重要；高度： 38px！重要；border: 1px实心# D7D7D7！重要；color: #810213！重要；字体粗细：加粗！重要；font-size: 18px！重要；文本-对齐：中心！重要；划水： 0!重要；边框-半径：2 px} .尼克ipt-active-nick { width: 40px！重要；高度： 40px！重要；线高： 40px！重要；文本对齐：中心；绝对位置：重要；top : 0；左： 0；z-index : 2；} .尼克ipt-active-nick img {垂直-对齐：中间；}/style/head dydiv class=' lh40-nick h40-nick fwb-nick '请在下方输入6位数字/div class=' ipt-box-nick mb15-nick '输入类型=' tel ' max length=' 6 ' class=' ipt-real-nick '/div class=' ipt-box-nick ' div class=' ipt-假盒子输入类型=“文本”输入类型=“文本”输入类型=“文本”输入类型=“文本”输入类型=“文本”输入类型=' text '/div/div class=' ipt-active-nick ' img src=' http 33600 ipt-real-nick ').on('input '，function(){//console。日志($(this)).val())；var $input=$(' .ipt-假盒输入');if(！$(这个)。val()){//无值光标顶置$('.ipt-active-nick ').css('left '，$input.eq(0).偏移量()。left-parseInt($(').ipt-box-nick ').父项()。CSS('左填充')' px ')；} if(/^[0-9]*$/g.test($(this).val())){//有值只能是数字//console.log($(this).val())；var pwd=$(this).val().trim()；for (var i=0，len=pwd.length我透镜；i ) { $input.eq(i).val(pwd[I])；if($input.eq(i)).下一个()。长度){//模拟光标，先将图片容器定位，控制左边的值而已$('.ipt-active-nick ').css('left '，$ input。方程式(一)^ 1 .偏移量()。left-parseInt($(').ipt-box-nick ').父项()。CSS('左填充')' px ')；} } $input.each(function() {//将有值的当前投入后的所有投入清空定义变量索引=$(这个).index()；if (index=len) { $(this).val(" ")；} });if (len==6) { //执行其他操作console.log('输入完整，执行操作');} }else{//清除英国压力单位中的非数字，返回纯数字的值var arr=$(this).val().匹配(/\ d/g)；$(这个)。瓦尔($(这个).val().切片(0，$(此)).val().(arr[arr]的最后索引。长度-1])1)；//console.log($(this).val())；} });/脚本/正文/html效果演示：

以上所述是小编给大家介绍的Java脚本语言仿支付宝6位数字密码输入框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！