本文实现的是一个类似支付宝支付密码的界面，只可以输入数字，且只可以输入6位

首先给大家展示下效果图，如果感觉不错，请参考实现代码。

1、样式表。包装{ margin: 10px auto宽度： 329 px高度： 640像素；填充-top : 200 px；}.inputbox容器{ width : 240 px高度： 50pxmargin: 0自动相对位置：}.inputBoxContainer .bogusInput { width : 100%；高度： 100%;border: # c3c3c3 1px固体；边界半径： 7px-moz-border-radius : 7px；-网络套件-边框-半径： 7px飞越：隐藏；绝对位置：z-index : 0；}.inputBoxContainer .realInput { width : 100%；高度： 100%;绝对位置：top :0 left : 0；z-index : 1；filter:alpha(不透明度=0);-moz-opa城33600；opacity:0 }。inputBoxContainer .博古西普输入{ padd : 0；宽度： 16.3%;高度： 100%;float : leftbackground : # ffffff文本对齐：中心；font-size : 20pxborder:无；右边框： #C3C3C3 1px实心；}.inputBoxContainer .bogusInput输入：最后一个孩子{边框：无；}.确认按钮{宽度： 240像素高度： 45px边界半径： 7px-moz-border-radius : 7px；-网络套件-边框-半径： 7px背景： # F4 F4；border: # d5d5d5 1px固体；显示器：块；font-size : 16px余量： 30px自动；边距-底部： 20px}.show value { width : 240 pxheart : 22px线高： 22pxfont-size : 16px文本对齐：中心；margin: 0 auto}2、HTML代码

div class=' wrap ' div class=' inputbox container ' id=' inputbox container '输入类型=' text ' class=' realInput '/div class=' bogusInput '输入类型='password' maxlength='6 '已禁用/输入类型='password' maxlength='6 '已禁用/输入类型='password' maxlength='6 '已禁用/输入类型='password' maxlength='6 '已禁用/输入类型=' password ' maxlength=' 6 '查看/button p class='显示值' id='显示值'/p/div 3、js代码控制逻辑效果

(函数(){ var container=document。getelementbyid(' inputbox容器')；boxInput={maxLength: ' '，realInput: ' '，bogusInput: ' '，bogusInputArr: ' '，callback: ' '，init:function(fun){var那=thisthis.callback=有趣；那个。realinput=容器。子级[0]；那个。bogusinput=容器。孩子[1]；那个。bogusinputrr=那个。博古西普。儿童；那个。MaxLength=那个。bogusinputrarr[0].getAttribute(' maxlength ')；那个。实现输出。oninput=function(){ that。setvalue()；}那个。实现输出。onpropertttychange=function(){即。setvalue()；}}，setvalue :函数(){ this。实现输出。值=这个。实现输出。价值。替换(/ D/g ' ')；控制台。日志(这个。实现输出。价值。替换(/ D/g ' '))var real _ str=this。实现输出。价值；for(var I=0；I this . MaxLengTii){ this。博古西普特[我].value=real_str[i]？real _ str[I]: " "；} if(real _ str。长度=这个。maxlength){ this。实现输出。value=real _ str。子串(0，6)；这个。回调()；}}，GetBoxInputValue e : FuncTion(){ var real value=' '；对于本例中的变量1。bogusinputrr){ if(！this.bogusInputArr[i].value){ break；}真实价值=这个。博古西普塔尔[一].价值；}返回real value } } }))))BoxInput。init()函数(){ GetValue()；});文件。getelementbyid(“确认按钮”).onclick=function(){ GetVaLue()；}函数getValue(){文档。getelementbyid('显示值').内部文本=BoxInput。getBoxInputValue()；}以上所述是小编给大家介绍的基于射流研究…实现类似支付宝支付密码输入框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！