前端入坑纪 32

今天是个双更的日子，也是个值得多多努力的日子。
未来的你，也一定会感谢如今勤耕不挫的自己！

最近呢，碰到个类似APP端密码输入框的效果，除了限制单个数字输入，还得自动focus到下一个input里，所以js关键不可少啊。

闲言少叙，直入正题。

效果图

OK，first things first！项目链接

HTML 结构

<p class="tipsPgf">输入提现密码,完成身份验证</p>
    <div id="passdWrp">
        <span class="active">
            <input type="password" tabindex="0" minlength="1" maxlength="1" name="">
        </span>
        <span>
            <input type="password" tabindex="1" minlength="1" maxlength="1" name="">
        </span>
        <span>
            <input type="password" tabindex="2" minlength="1" maxlength="1" name="">
        </span>
        <span>
            <input type="password" tabindex="3" minlength="1" maxlength="1" name="">
        </span>
        <span>
            <input type="password" tabindex="4" minlength="1" maxlength="1" name="">
        </span>
        <span>
            <input type="password" tabindex="5" minlength="1" maxlength="1" name="">
        </span>
        <div class="wrpBs">
            <a id="sureBtn" href="javascript:;">确定</a>
        </div>

    </div>

每个input都绝对定位到包裹它的span里，每个span都是自适应宽高

CSS 结构

body {
            margin: 0;
            padding: 0;
            background-color: #F4F4F4
        }
        
        input {
            border: none;
            outline: none;
            background: none;
        }
        
        a {
            outline: none;
            text-decoration: none;
        }
        
        .tipsPgf {
            font-size: 16px;
            color: #5e5e5e;
            letter-spacing: 0.86px;
            text-align: center;
            width: 80%;
            margin: 3% auto;
        }
        
        #passdWrp {
            text-align: center
        }
        
        #passdWrp span {
            position: relative;
            display: inline-block;
            padding: 6.5%;
            background-color: #fff;
            margin: 3px 2px;
        }
        
        #passdWrp span input {
            font-size: 14px;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            line-height: 30px;
            text-align: center;
        }
        
        .wrpBs {
            width: 96%;
            margin: 5% auto
        }
        
        .wrpBs a {
            display: block;
            margin: 0 4%;
            width: 92%;
            height: 45px;
            line-height: 45px;
            border-radius: 4px;
            text-align: center;
            background-color: #4990e2;
            color: #fff;
            font-size: 16px;
        }

都是些常规的css布局样式，没什么特殊的style

JS 结构

        var mInput = document.getElementsByTagName("input");
        var sBtn = document.getElementById("sureBtn");


        // 进入页面时焦点到第一个input输入框
        mInput[0].focus();

      // 点击某个input时，重置它和后面的input值为空
        for (var l = 0; l < mInput.length; l++) {
            mInput[l].ontouchstart = function() {
                var indx = this.getAttribute("tabindex");
                for (var i = indx; i < mInput.length; i++) {
                    mInput[i].value = "";
                }
            }

        }


        // 点击确定按钮时，判断是否为空，如果不为空，则推入到数组中打印到控制台
        sBtn.onclick = function() {
            var passArr = [];
            for (var l = 0; l < mInput.length; l++) {
                if (mInput[l].value != "") {
                    passArr.push(mInput[l].value);
                } else {
                    alert("有未填项！");
                    return;
                }

            }
            console.log(passArr)
        }



        // 这里就是判断输入为数字，并自动下移一个input的函数
        for (var i = 0; i < mInput.length; i++) {

            mInput[i].addEventListener("keyup", function(evt) {
                var indx = this.getAttribute("tabindex");// 获取当前input的tabindex
                var _val = this.value;// 获取当前input里面的值
                if (_val.match(/\d/)) {// 判断是否为数字
                    indx++;

                  如果下一个input已经是末尾了，自动focus到确定按钮
                    if (indx == mInput.length) {
                        sBtn.focus();
                    }

                  // 70毫秒后，焦点至下一个input
                    setTimeout(function() {
                        mInput[indx].focus();
                    }, 70);
                } else {
                    this.value = "";
                    alert("请输入数字")
                }

             // 这里是最坑爹的，在电脑端模拟是有值的。可是到了移动端获取不到，初步估计是用了第三方输入法。求助知道的小伙伴，求解惑！！！
                 console.log(evt.key);

            })
        }

基本到这里，就算是大功告成了。有兴趣的小伙伴可以研究下，加油哦！

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！