实现：支付宝手机密码支付功能

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 <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");//获取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     }

 

posted @ 2018-10-30 21:14  前端极客  阅读(401)  评论(0)  编辑  收藏  举报