首页 > 代码库 > 支付密码框
支付密码框
本文实现的是一个类似支付宝支付密码的界面，只可以输入数字，且只可以输入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 = http://www.mamicode.com/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 = http://www.mamicode.com/real_str[i]?real_str[i]:"";29 }30 if(real_str.length >= this.maxLength){31 this.realInput.value = http://www.mamicode.com/real_str.substring(0,6);32 this.callback();33 }34 },35 getBoxInputValue:function(){36 var realValuehttp://www.mamicode.com/= "";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.实现的效果
支付密码框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。