本文实现的是一个类似支付宝支付密码的界面，只可以输入数字，且只可以输入6位

1、样式表

1  .wrap{ 2             margin: 10px auto; 3             width: 329px; 4             height: 640px;  7             padding-top: 200px; 8         } 9         .inputBoxContainer{10             width: 240px;11             height: 50px;12             margin: 0 auto;13             position: relative;14         }15         .inputBoxContainer .bogusInput{16             width: 100%;17             height: 100%;18             border: #c3c3c3 1px solid;19             border-radius: 7px;20             -moz-border-radius: 7px;21             -webkit-border-radius: 7px;22             overflow: hidden;23             position: absolute;24             z-index: 0;25         }26         .inputBoxContainer .realInput{27             width: 100%;28             height: 100%;29             position: absolute;30             top:0;31             left: 0;32             z-index: 1;33             filter:alpha(opacity=0);34             -moz-opacity:0;35             opacity:0;36         }37         .inputBoxContainer .bogusInput input{38             padding: 0;39             width: 16.3%;40             height: 100%;41             float:left;42             background: #ffffff;43             text-align: center;44             font-size: 20px;45             border: none;46             border-right: #C3C3C3 1px solid;47         }48         .inputBoxContainer .bogusInput input:last-child{49             border: none;50         }51         .confirmButton{52             width: 240px;53             height: 45px;54             border-radius: 7px;55             -moz-border-radius: 7px;56             -webkit-border-radius: 7px;57             background: #f4f4f4;58             border: #d5d5d5 1px solid;59             display: block;60             font-size: 16px;61             margin: 30px auto;62             margin-bottom: 20px;63         }64         .showValue{65             width: 240px;66             height: 22px;67             line-height: 22px;68             font-size: 16px;69             text-align: center;70             margin: 0 auto;71         }

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"); 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;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,"");25                 console.log(this.realInput.value.replace(/\D/g,""))26                 var real_str = this.realInput.value;27                 for(var i = 0 ; i < this.maxLength ; i++){28                     this.bogusInputArr[i].value = real_str[i]?real_str[i]:"";29                 }30                 if(real_str.length >= this.maxLength){31                     this.realInput.value = real_str.substring(0,6);32                     this.callback();33                 }34             },35             getBoxInputValue:function(){36                 var realValue = "";37                 for(var i in this.bogusInputArr){38                     if(!this.bogusInputArr[i].value){39                         break;40                     }41                     realValue += this.bogusInputArr[i].value;42                 }43                 return realValue;44             }45         }46     })()47     boxInput.init(function(){48         getValue();49     });50     document.getElementById("confirmButton").onclick = function(){51         getValue();52     }53     function getValue(){54         document.getElementById("showValue").innerText = boxInput.getBoxInputValue();55     }

4.实现的效果