js模拟支付密码输入

来源：互联网发布：linux运维很忙吗编辑：程序博客网时间：2024/05/01 20:10

效果图：

HTML代码：

Css代码：

 body{            background: #fff;            font-size:0.7rem;        }        input{            color:transparent;            text-shadow:0 0 0 #000;            font-size:1rem;        }        .rec_in_container{            padding:0 1.25rem;        }        .rec_in_container p{            margin:1.5rem 0;            color: #999;        }        .rec_in_show{            position: relative;        }        .rec_in_input{            height: 2.35rem;            width: 200%;            position: absolute;            top:0;            left:0;            z-index: 1;            filter:alpha(opacity=0);            -moz-opacity:0;            opacity:0;            margin-left: -100%;            color:transparent;            text-shadow:0 0 0 #000;        }        .rec_in_pw{            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */            -webkit-box-pack: space-between;            -moz-justify-content: space-between;            -webkit-justify-content: space-between;            justify-content: space-between;        }        .rec_in_pw div{            width: 2.35rem;            height:2.35rem;            background: #f0f0f0;            padding: 0;            text-align: center;            position: relative;        }        .rec_in_pw div i{            display: inline-block;            width: .4rem;            height:.4rem;            position: absolute;            top:0;            right:0;            left: 0;            bottom: 0;            margin: auto;            background: #000;            border-radius: 50%;            display: none;        }        .rec_in_submit{            text-align: center;            margin-top:2rem;        }        .rec_in_submit span{            display: inline-block;            width: 14.05rem;            height:2.2rem;            background: #ff9a96;            color: #fff;            font-size:.9rem;            line-height: 2.4rem;            border-radius: .2rem;        }

Js代码：

(function(){            var container = document.getElementById("inputBoxContainer");            boxInput = {                maxLength:6,                realInput:"",                bogusInput:"",                bogusInputArr:"",                callback:"",                init:function(fun){                    var that = this;                    this.callback = fun;                    that.realInput = container.children[0];                    that.bogusInput = container.children[1];                    that.bogusInputArr = that.bogusInput.children;                    that.realInput.oninput = function(){                        that.setValue();                    }                    that.realInput.onpropertychange = function(){                        that.setValue();                    }                },                setValue:function(){                    this.realInput.value = this.realInput.value.replace(/\D/g,"");                    var real_str = this.realInput.value;                    var real_len = this.realInput.value.length > this.maxLength ? this.maxLength : this.realInput.value.length;                    for(var i=0 ;i= this.maxLength){                        this.realInput.value = real_str.substring(0,this.maxLength);                        this.callback();                    }                },                getBoxInputValue:function(){                    return this.realInput.value;                }            }        })()        boxInput.init(function(){            //每次输入回调        });        document.getElementById("confirmButton").onclick = function(){            checkId();        }        function checkId(){            //判断是否符合资格            if(boxInput.getBoxInputValue().length == 6){                console.log(boxInput.getBoxInputValue());            }        }

阅读全文

0 0