六位密码输入器

老规矩~去DEMO，先享受乐趣：六位密码输入器再说源码：六位密码输入器我从DEMO中可以看出第一个字符只能输入六个字符，并且只允许输入数字。六位数字输入完成后，会自动执行回调（DEMO中显示输入结果）。真正的输入框，即真正处于焦点状态并得到用户输入的input；第二个是一组伪输入框，也就是它并没有真正获得焦点，只是显示当前输入的值（当然还有密码，只是一个小黑点~）。其次，我们需要保持简单，让一组（6）个假元素重叠在真实输入框的正下方。如下：其实没有边距~，只是为了顺路看的更清楚。另外，我们需要将顶层真实输入框的opcity设置为0，让这组假输入框真正呈现给用户。但是当用户真正再次输入的时候，他还是在真正的输入框上进行操作。后面会说到用户的输入，依次填入假的输入框~很简单~2.代码code先初始化各个DOM，绑定Enter事件。函数初始化（乐趣）{varthat=this;this.callback=有趣；that.realInput=container.children[0];that.bogusInput=container.children[1];that.bogusInputArr=that.bogusInput.children;.maxLength=that.bogusInputArr[0].getAttribute("maxlength");that.realInput.oninput=function(){that.setValue();}that.realInput.onpropertychange=function(){that.setValue();}}然后在用户输入函数setValue(){this.realInput.value=this.realInput.value.replace(/\D/g,"")时分别将用户输入输入到伪输入框中console.log(this.realInput.value.replace(/\D/g,""))varreal_str=this.realInput.value;for(vari=0;i=this.maxLength){this.realInput.value=real_str.substring(0,6);这个回调（）；}}最后当然是输入密码后要获取密码了~下面来一个获取最终值的方法~functiongetBoxInputValue(){varrealValue="";为了（variinthis.bogusInputArr){if(!this.bogusInputArr[i].value){break;}realValue+=this.bogusInputArr[i].value;}返回真实值；}