js实现多个小方格输入验证码，一格输入完成后自动聚焦到下一格

骑猪看日落 2021-11-09 05:48 960阅读 0赞

--------------------

**多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮)**

--------------------

js实现输入四位或者六位验证码，四个或者六个的小方格样式的需要多个input框，四位就是四个input，六位就是六个input，下面开始上代码：

<div class="code_box" onclick="code_focus()">
                        <input class="code-num" type="tel" maxlength="1">
                        <input class="code-num" type="tel" maxlength="1">
                        <input class="code-num" type="tel" maxlength="1">
                        <input class="code-num" type="tel" maxlength="1">
                    </div>
    
    
                    //注：同一个类名，maxlengh限制长度最多输入一位

样式是我这边需要的，可以根据需求随意更改

.code_box {
                width: 60%;
                height: 42px;
                margin-top: 30px;
                display: flex;
                justify-content: space-between;
            }
    
            .code_box input {
                width: 20%;
                height: 40px;
                text-align: center;
                font-size: 20px;
                outline: none;
                border: 1px solid #AAA;
            }

最后用js来实现就ok了：

//封装方法：
            function goNextInput(el) {
                var delCount = 2;//用来判断删除时是第一次点击还是第二次
                var txts = document.querySelectorAll(el);
                for (var i = 0; i < txts.length; i++) {
                    var t = txts[i];
                    t.index = i;
                    t.setAttribute("readonly", true);
                    t.onkeyup = function () {
                        this.value = this.value.replace(/^(.).*$/, '$1');
                        var next = this.index + 1;
                        // 最后一个输入框
                        if (next == txts.length) {
                            if (this.value) {
                                delCount = 1//有值的时候把delCount变成1
                            } else {
                                if (delCount < 2) {
                                    delCount++
                                } else {
                                    if (next - 2 >= 0) {
                                        txts[next - 2].removeAttribute("readonly");
                                        txts[next - 2].focus();
                                        txts[next - 2].value = '';
                                        txts[next - 1].setAttribute("readonly", true);
                                        delCount = 1
                                    }
                                }
                            }
                        }
    
                        if (next > txts.length - 1) return;
                        txts[next].removeAttribute("readonly");
                        if (this.value) {
                            delCount = 2
                            txts[next].focus();
                            txts[next - 1].setAttribute("readonly", true);
                        }
                        else {
                            if (next - 2 >= 0) {
                                txts[next - 2].removeAttribute("readonly");
                                txts[next - 1].setAttribute("readonly", true);
                                txts[next - 2].focus();
                                txts[next - 2].value = '';
                                delCount = 1
                            }
                        }
                    }
                }
                txts[0].removeAttribute("readonly");
            }
            //调用该方法：
            goNextInput('.code-num');

如果输入的时候你点击了其他的地方导致input失去焦点了，那么你再点击的时候，不管点击哪一个盒子，聚焦的都要是最后一个有值的后面那个盒子，如果输入到第四个盒子的时候不管有没有值都要聚焦第四个

// 点击code输入框，判断谁聚焦
            function code_focus() {
                var txts = document.querySelectorAll('.code-num');
                for (var i = 0; i < txts.length; i++) {
                    var t = txts[i];
                    t.index = i;
                    if (txts[0].value != '') {
                        if (txts[1].value != '') {
                            if (txts[2].value != '') {
                                if (txts[3].value != '') {
                                    txts[3].focus();
                                } else {
                                    txts[3].focus();
                                }
                            } else {
                                txts[2].focus();
                            }
                        } else {
                            txts[1].focus();
                        }
                    } else {
                        txts[0].focus();
                    }
                }
            }

这样就ok了，这个是跟点击获取验证码倒计时六十秒配合使用的，如果有需要的朋友可以去参考一些柚子的另一篇博客[《vue自定义获取验证码组件，倒计时60秒》][vue_60]，当然这篇博客是柚子写vue项目的时候写的，下面我也用原生js实现了一次，也可以参考一下，下面附上所有代码：

<body>
            <div class="code">
                <p class="title">短信验证码</p>
                <div class="codes">
                    <div class="code_box" onclick="code_focus()">
                        <input class="code-num" type="tel" maxlength="1">
                        <input class="code-num" type="tel" maxlength="1">
                        <input class="code-num" type="tel" maxlength="1">
                        <input class="code-num" type="tel" maxlength="1">
                    </div>
                    <div id="btn" class="btn" onclick="getCode()">获取验证码</div>
                </div>
            </div>
    
            //自定义吐司提示
            <div class="toast_box">
                <p id="toast"></p>
            </div>
    
        </body>
    
        //不要忘记style是在head里面的
        <style>
            .code {
                width: 100%;
                box-sizing: border-box;
                padding: 10px 30px;
                margin-top: 20px;
                position: relative;
            }
    
            .codes {
                width: 100%;
                display: flex;
                justify-content: space-between;
                position: relative;
            }
    
            .code_box {
                width: 60%;
                height: 42px;
                margin-top: 30px;
                display: flex;
                justify-content: space-between;
            }
    
            .code_box input {
                width: 20%;
                height: 40px;
                text-align: center;
                font-size: 20px;
                outline: none;
                border: 1px solid #AAA;
            }
    
            .code .btn {
                width: 35%;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid #CCC;
                background: #FFF;
                border-radius: 5px;
                color: #AAA;
                font-size: 14px;
                position: absolute;
                bottom: 0;
                right: 0;
            }
    
            //吐司的样式
            @keyframes show {
                0% {
                    opacity: 0;
                }
    
                100% {
                    opacity: 1;
                }
            }
    
            @keyframes hide {
                0% {
                    opacity: 1;
                }
    
                100% {
                    opacity: 0;
                }
            }
    
            .toast_box {
                width: 100%;
                position: absolute;
                bottom: 50px;
                justify-content: center;
                display: none;
            }
    
            .toast_box p {
                box-sizing: border-box;
                padding: 10px 20px;
                max-width: 72%;
                width: max-content;
                background: #000;
                color: #FFF;
                font-size: 16px;
                text-align: center;
                border-radius: 6px;
                opacity: 0.8;
            }
        </style>
    
        <script>//可以放到body里面
            // input框输入1位数字后自动跳到下一个input聚焦
            function goNextInput(el) {
                var delCount = 2;
                var txts = document.querySelectorAll(el);
                for (var i = 0; i < txts.length; i++) {
                    var t = txts[i];
                    t.index = i;
                    t.setAttribute("readonly", true);
                    t.onkeyup = function () {
                        this.value = this.value.replace(/^(.).*$/, '$1');
                        var next = this.index + 1;
                        // 最后一个输入框
                        if (next == txts.length) {
                            if (this.value) {
                                delCount = 1
                            } else {
                                if (delCount < 2) {
                                    delCount++
                                } else {
                                    if (next - 2 >= 0) {
                                        txts[next - 2].removeAttribute("readonly");
                                        txts[next - 2].focus();
                                        txts[next - 2].value = '';
                                        txts[next - 1].setAttribute("readonly", true);
                                        delCount = 1
                                    }
                                }
                            }
                        }
    
                        if (next > txts.length - 1) return;
                        txts[next].removeAttribute("readonly");
                        if (this.value) {
                            delCount = 2
                            txts[next].focus();
                            txts[next - 1].setAttribute("readonly", true);
                        }
                        else {
                            if (next - 2 >= 0) {
                                txts[next - 2].removeAttribute("readonly");
                                txts[next - 1].setAttribute("readonly", true);
                                txts[next - 2].focus();
                                txts[next - 2].value = '';
                                delCount = 1
                            }
                        }
                    }
                }
                txts[0].removeAttribute("readonly");
            }
            goNextInput('.code-num');
            // 获取验证码
            function getCode() {
                var mobile_reg = /^1[3456789]\d{9}$/;//手机正则
                var mobile = document.getElementById('mobile').value//获取输入的手机号码
                var count;//时间多少s
                var timer = null;//setInterval
                var btn_txt = document.getElementById('btn');//按钮文字
                if (mobile == '') {
                    toast('手机号码不能为空', 3000);
                } else if (!mobile_reg.test(mobile)) {
                    toast('手机号码格式不正确', 3000);
                } else {
                    if (btn_txt.innerHTML == '获取验证码') {
                        btn_txt.style.border = '1px solid #07C4DD'
                        btn_txt.style.color = '#07C4DD'
                        btn_txt.innerHTML = '60s后重新获取'
                        const num = 60;
                        if (!timer) {
                            count = num;
                            timer = setInterval(() => {
                                if (count > 0 && count <= num) {
                                    count--;
                                    btn_txt.innerHTML = count + 's后重新获取'
                                } else {
                                    clearInterval(timer);
                                    timer = null;
                                    btn_txt.innerHTML = '获取验证码'
                                    btn_txt.style.border = '1px solid #CCC'
                                    btn_txt.style.color = '#AAAAAA'
                                }
                            }, 1000);
                        }
                    }
                }
            }
            // 自定义吐司
            function toast(text, time) {
                var toast = document.getElementById('toast');
                var toast_box = document.getElementsByClassName('toast_box')[0];
                toast.innerHTML = text;
                toast_box.style.animation = 'show 1.5s'
                toast_box.style.display = 'flex';
                setTimeout(() => {
                    toast_box.style.animation = 'hide 1.5s'
                    setTimeout(() => {
                        toast_box.style.display = 'none';
                    }, 1400)
                }, time)
            }
            // 点击code输入框，判断谁聚焦
            function code_focus() {
                var txts = document.querySelectorAll('.code-num');
                for (var i = 0; i < txts.length; i++) {
                    var t = txts[i];
                    t.index = i;
                    if (txts[0].value != '') {
                        if (txts[1].value != '') {
                            if (txts[2].value != '') {
                                if (txts[3].value != '') {
                                    txts[3].focus();
                                } else {
                                    txts[3].focus();
                                }
                            } else {
                                txts[2].focus();
                            }
                        } else {
                            txts[1].focus();
                        }
                    } else {
                        txts[0].focus();
                    }
                }
            }
        </script>

ok,就是这些了，如果有更简单或者更实用的方法，欢迎您来留言，我们共同讨论！！！希望能帮助到有需要的朋友！！！

[vue_60]: https://blog.csdn.net/qq_43052274/article/details/95048406