支付密码框

Posted 2020-08-05 荆棘鸟的感动

本文实现的是一个类似支付宝支付密码的界面，只可以输入数字，且只可以输入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     }

View Code

4.实现的效果