js模拟支付密码输入

最新推荐文章于 2024-04-23 21:47:42 发布

Fighon-Blog

最新推荐文章于 2024-04-23 21:47:42 发布

阅读量2.8k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_37327931/article/details/76593841

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果图：

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());
            }
        }