1.css样式：
1 .wrap{ 2 margin: 10px auto; 3 329px; 4 height: 640px; 5 padding-top: 200px; 6 } 7 .inputBoxContainer{ 8 240px; 9 height: 50px; 10 margin: 0 auto; 11 position: relative; 12 } 13 .inputBoxContainer .bogusInput{ 14 100%; 15 height: 100%; 16 border: #c3c3c3 1px solid; 17 border-radius: 7px; 18 -moz-border-radius: 7px; 19 -webkit-border-radius: 7px; 20 overflow: hidden; 21 position: absolute; 22 z-index: 0; 23 } 24 .inputBoxContainer .realInput{ 25 100%; 26 height: 100%; 27 position: absolute; 28 top:0; 29 left: 0; 30 z-index: 1; 31 filter:alpha(opacity=0); 32 -moz-opacity:0; 33 opacity:0; 34 } 35 .inputBoxContainer .bogusInput input{ 36 padding: 0; 37 16.3%; 38 height: 100%; 39 float:left; 40 background: #ffffff; 41 text-align: center; 42 font-size: 20px; 43 border: none; 44 border-right: #C3C3C3 1px solid; 45 } 46 .inputBoxContainer .bogusInput input:last-child{ 47 border: none; 48 } 49 .confirmButton{ 50 240px; 51 height: 45px; 52 border-radius: 7px; 53 -moz-border-radius: 7px; 54 -webkit-border-radius: 7px; 55 background: #f4f4f4; 56 border: #d5d5d5 1px solid; 57 display: block; 58 font-size: 16px; 59 margin: 30px auto; 60 margin-bottom: 20px; 61 } 62 .showValue{ 63 240px; 64 height: 22px; 65 line-height: 22px; 66 font-size: 16px; 67 text-align: center; 68 margin: 0 auto; 69 }
2.HTML：
1 <div class="wrap"> 2 <div class="inputBoxContainer" id="inputBoxContainer"> 3 <input type="text" class="realInput"/> 4 <div class="bogusInput"> 5 <input type="password" maxlength="6" disabled/> 6 <input type="password" maxlength="6" disabled/> 7 <input type="password" maxlength="6" disabled/> 8 <input type="password" maxlength="6" disabled/> 9 <input type="password" maxlength="6" disabled/> 10 <input type="password" maxlength="6" disabled/> 11 </div> 12 </div> 13 <button id="confirmButton" class="confirmButton">查看</button> 14 <p class="showValue" id="showValue"></p> 15 </div>
3.JS代码：
1 (function(){ 2 var container = document.getElementById("inputBoxContainer");//获取input的包裹容日 3 boxInput = { 4 maxLength:"", 5 realInput:"", 6 bogusInput:"", 7 bogusInputArr:"", 8 callback:"", 9 init:function(fun){ 10 var that = this; 11 this.callback = fun; 12 that.realInput = container.children[0]; 13 that.bogusInput = container.children[1]; 14 that.bogusInputArr = that.bogusInput.children;//6个Input框 15 that.maxLength = that.bogusInputArr[0].getAttribute("maxlength"); 16 that.realInput.oninput = function(){ 17 that.setValue(); 18 } 19 that.realInput.onpropertychange = function(){ 20 that.setValue(); 21 } 22 }, 23 setValue:function(){ 24 this.realInput.value = this.realInput.value.replace(/D/g,"");//d是数字 25 var real_str = this.realInput.value; 26 for(var i = 0 ; i < this.maxLength ; i++){//循环遍历6个获取每个的值； 27 this.bogusInputArr[i].value = real_str[i]?real_str[i]:""; 28 } 29 if(real_str.length >= this.maxLength){//获取前6个 30 this.realInput.value = real_str.substring(0,6); 31 this.callback(); 32 } 33 }, 34 getBoxInputValue:function(){ 35 var realValue = ""; 36 for(var i in this.bogusInputArr){ 37 if(!this.bogusInputArr[i].value){ 38 break; 39 } 40 realValue += this.bogusInputArr[i].value; 41 } 42 return realValue; 43 } 44 } 45 })() 46 boxInput.init(function(){ 47 getValue(); 48 }); 49 function getValue(){ 50 document.getElementById("showValue").innerText = boxInput.getBoxInputValue(); 51 }