标签：
本文实现的是一个类似支付宝支付密码的界面，只可以输入数字，且只可以输入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 <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"); 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.实现的效果
标签：
原文地址：http://www.cnblogs.com/nini-huai/p/5826955.html
