JS实现了六字密码输入装置的功能

老规矩~去DEMO，去吧：六字密码输入设备

转到源代码：六字符密码输入设备

从DEMO中我可以看到，首先只能输入六个字符，只能输入数字，输入六位数后会自动执行回拨(输入结果显示在DEMO中)

首先，先说原则

首先，我们需要两样东西：一个是真实的输入框，即它真正处于焦点，从用户那里得到输入输入；第二种是一组伪输入框，也就是它们并没有真正得到焦点，只是显示当前的输入值(当然密码只是一个小黑点~)。

其次，我们需要简单不惧，让一组(6个)假元素刚好重叠在真实输入框的底部。如下所示：

利润率实际上是没有的~，只是为了在路上看得更清楚。

此外，我们需要将顶层的真实输入框opcity设置为0，这样这组假输入框就实际呈现给了用户。

然而，当用户实际重新输入时，他仍然操作真实的输入框。之后我们说的是把用户的输入依次填入假输入框~

是不是很简单~

二.代码代码

首先，初始化每个DOM并绑定输入事件。

函数init(fun){ var=this；this.callback=有趣；that . realinput=container . children[0]；that . bogusinput=container . children[1]；that . bogusinputrr=that . bogusinput . children；that . MaxLength=that . BogusinPutarr[0]。getAttribute(' maxlength ')；that . realinput . oninput=function(){ that . setvalue()；} that . realinput . onproperttychange=function(){ that . setvalue()；}}然后在用户输入时将用户输入输入到伪造输入框中。

函数setValue(){ this . realinput . value=this . realinput . value . replace(/\ D/g ' ')；console . log(this . realinput . value . replace(/\ D/g ' '))var real _ str=this . realinput . value；for(var I=0；i this.maxLengthI){ this . bogusinputrr[I]。value=real_str[i]？real _ str[I]:“”；} if(real _ str . length=this . maxlength){ this . realinput . value=real _ str . substring(0，6)；this . callback()；}}最后我们输入密码，当然要得到它~，来个方法得到最终值~

函数getboxiinputvalue(){ var real value=' '；for(var I in this . BogusinPutarr){ if(！this.bogusInputArr[i]。value){ break；} real value=this . BogusinPutarr[I]。价值；}返回realValue}以上是JS实现六字密码输入功能的介绍。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！