基于JS实现类似支付宝支付密码输入框

 .wrap{ margin: 10px auto; width: 329px; height: 640px; padding-top: 200px; } .inputBoxContainer{ width: 240px; height: 50px; margin: 0 auto; position: relative; } .inputBoxContainer .bogusInput{ width: 100%; height: 100%; border: #c3c3c3 1px solid; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; overflow: hidden; position: absolute; z-index: 0; } .inputBoxContainer .realInput{ width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: 1; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; } .inputBoxContainer .bogusInput input{ padding: 0; width: 16.3%; height: 100%; float:left; background: #ffffff; text-align: center; font-size: 20px; border: none; border-right: #C3C3C3 1px solid; } .inputBoxContainer .bogusInput input:last-child{ border: none; } .confirmButton{ width: 240px; height: 45px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; background: #f4f4f4; border: #d5d5d5 1px solid; display: block; font-size: 16px; margin: 30px auto; margin-bottom: 20px; } .showValue{ width: 240px; height: 22px; line-height: 22px; font-size: 16px; text-align: center; margin: 0 auto; }

 
 
 
 
查看

 (function(){ var container = document.getElementById("inputBoxContainer"); boxInput = { maxLength:"", realInput:"", bogusInput:"", bogusInputArr:"", callback:"", init:function(fun){ var that = this; this.callback = fun; that.realInput = container.children[0]; that.bogusInput = container.children[1]; that.bogusInputArr = that.bogusInput.children; that.maxLength = that.bogusInputArr[0].getAttribute("maxlength"); that.realInput.oninput = function(){ that.setValue(); } that.realInput.onpropertychange = function(){ that.setValue(); } }, setValue:function(){ 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.maxLength){ this.realInput.value = real_str.substring(0,6); this.callback(); } }, getBoxInputValue:function(){ var realValue = ""; for(var i in this.bogusInputArr){ if(!this.bogusInputArr[i].value){ break; } realValue += this.bogusInputArr[i].value; } return realValue; } } })() boxInput.init(function(){ getValue(); }); document.getElementById("confirmButton").onclick = function(){ getValue(); } function getValue(){ document.getElementById("showValue").innerText = boxInput.getBoxInputValue(); }