1.css样式：

1   .wrap{ 2             margin: 10px auto; 3             width: 329px; 4             height: 640px; 5             padding-top: 200px; 6         } 7         .inputBoxContainer{ 8             width: 240px; 9             height: 50px;10             margin: 0 auto;11             position: relative;12         }13         .inputBoxContainer .bogusInput{14             width: 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             width: 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             width: 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             width: 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             width: 240px;64             height: 22px;65             line-height: 22px;66             font-size: 16px;67             text-align: center;68             margin: 0 auto;69         }

2.HTML：

1 
     
       2     
      
        3         
        4         
       
         5             
         6             
         7             
         8             
         9             
        10             
        11         
       
12     
      
13     
      查看14     
      
15 
     

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     }