淘宝京东的6位数字支付密码实现

京东淘宝的密码输入框功能点

• 只能输入数字
• 只能输入6位字符
• 每次输入一个字符，对应位置的小黑点显示
• 每次删除一个字符，对应位置的小黑点消失

实现思路

1. 写好6位密码输入框的静态样式和html结构
2. 将密码输入框input定位到父容器，覆盖之前写好的6位密码输入框区域，并设置为透明
3. 虽然设置了密码输入框为透明，但当密码输入框获得焦点的时候，输入框的光标会显示出来，并不是透明状态。为了解决这个问题，暂时想到了两种方法，第一种，利用css将光标也设置为透明，不过这种方法有一定的兼容问题；第二种，当输入框获得焦点的时候，将输入框定位到屏幕外面，用户看不到输入框，自然也就看不到光标在那里一闪一闪了。
4. 对于用户只能输入数字的功能，这里用正则表达式就搞定了，如果用户输入了非数字字符，将input输入框的值清空
5. 对于用户输入超过6位字符的情况，利用字符串的截取方法截取input.value的前6位字符
6. 循环遍历圆点，将index小于input.value.length的圆点显示出来
7. 用户输入超过6个的数字的时候，你再去删除，你会发现要删除很多字符，那些小圆点才会相应的消失，所以这里，将截取的6位字符赋值给input输入框的值，让input.value长度永远小于等于6

HTML结构

• 父容器 input-ps 用于input输入框的定位
• 一位密码对应一个input-ps-item和dot

<div class="input-ps">
    <div class="input-ps-item">
        <span class="dot"></span> //小圆点
    </div>
    <div class="input-ps-item">
        <span class="dot"></span>
    </div>
    <div class="input-ps-item">
        <span class="dot"></span>
    </div>
    <div class="input-ps-item">
        <span class="dot"></span>
    </div>
    <div class="input-ps-item">
        <span class="dot"></span>
    </div>
    <div class="input-ps-item last">
        <span class="dot"></span>
    </div>
    <input id="input-mima" class="input-mima" type="text"/>
</div>

CSS样式

css样式自己定义就行，想要什么样式自己写～～～注意几个关键点

• dot初始状态为隐藏状态
• input输入框为绝对定位，覆盖在6个密码块上，设置为透明

.input-ps{
    position: relative;
    display: flex;
    align-items: center;
    width: 8.28125rem;
    height: 1.375rem;
    margin: 0 auto;
    border: 1px solid #d9d9d9;
    border-radius: 0.1875rem;
    background-color: #fff;
}
.input-ps-item{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;
    height: 0.78125rem;
    border-right: 1px solid #d9d9d9;
}
.last{
    border: none;
}
.dot{
    display: none;
    width: 0.234375rem;
    height: 0.234375rem;
    border-radius: 0.234375rem;
    background-color: #363e49;
}
.input-mima{
    position: absolute;
    left: 0;
    top: 0;
    height: 1.375rem !important;
    color: transparent;
    opacity: 0;
}

JS脚本

/**
         * 获取dom节点
         */
        var dom = {
            $input_mima : document.getElementById("input-mima")            //隐藏起来的密码输入框
        }

        /**
         * 隐藏的密码输入框获得焦点事件
         * 输入框获得焦点后，将输入框的定位定到屏幕看不见的位置
         */
        dom.$input_mima.addEventListener("focus",function(){
            this.style.top = "-10000px";
        })
        /**
         * 隐藏的密码输入框失去焦点事件
         *  输入框失去焦点后，将输入框的定位定原来的位置
         */
        dom.$input_mima.addEventListener("blur",function(){
            this.style.top = "0";
        })
        /**
         * 隐藏的输入框输入值的事件
         * 判断输入的值中是否都是数字
         * 如果都是数字，截取最前面6位数字
         * 如果不全是数字，将输入框中的值设置空
         * 遍历dot点，将和输入框内值的长度一致的dot个数显示出来
         *
         */
        dom.$input_mima.addEventListener("input",function(){
            var mima ;
            //正则判断输入的值是否全是数字
            if(/^[0-9]*$/.test(this.value)){
                mima = this.value.substring(0,6); //截取输入框中值的前6个字符
                this.value = mima;                  //将输入框中的值设置位截取到的值
            }else{
                mima = "";
                this.value = mima;                  //将输入框的值设置位空
            }
            //遍历圆点dot，将index小于密码长度的圆点显示出来。这里我是用的mui框架的遍历方法，如果你用的不是mui框架，可以换成其他的方式遍历，下面有一个原生JS的循环方法
            mui(".dot").each(function(index){
                if(index < mima.length){
                    this.style.display = "block";
                }else{
                    this.style.display = "none";
                }
            })
            //原生的循环方法 - ，-
            // var dot_list = document.getElementsByClassName("dot");
            // for(var index =0;index<dot_list.length;index++){
            //     if(index < mima.length){
            //         dot_list[index].style.display = "block";
            //     }else{
            //         dot_list[index].style.display = "none";
            //     }
            // }

            //输入的密码达到6位之后判断密码是否正确，这边模拟了一下正确密码是123456的情况
            //密码正确之后进行你想要的操作
            //如果不希望输入的密码字符达到6位后自动进行业务逻辑的代码，这部分可以不写，将你的业务逻辑绑定到别的节点
            if(mima.length >=6){
                //TODO 这里写业务逻辑代码
                //模拟密码
                if(mima == "123456"){
                    //TODO 这里写业务逻辑代码
                }

            }
        })