原生js实现手机验证码输入

html部分:

     <div id="box">

        <input type="text" autofocus>

        <input type="text">

        <input type="text">

        <input type="text">

        <input type="text">

        <input type="text">

    </div>


js部分:

     <script>

        let inputs = document.querySelectorAll("input");//获取全部input输入框

        for (const i of inputs) {

            i.oninput = checkCode  //为全部input添加事件

        }

        var elt;   

        function checkCode(e) { 

            elt = e.target.nextElementSibling;  //获取当前事件源的下一个兄弟元素

            if (elt)

                elt.focus();  //下一个兄弟元素存在,下一个兄弟元素获取焦点

            if (box.lastElementChild.value !== '')

                box.lastElementChild.blur()    //下一个兄弟元素不存在则失焦

        }

        window.onkeydown = function (e) {

            if (e.keyCode === 8) {  //键盘删除按键触发

                var del = (elt == null ? box.lastElementChild : elt.previousElementSibling); //如当前为失焦状态,则默认选择最后一个元素,否则选择上一个兄弟元素

                if (del == null) return    //第一个的上一个兄弟元素为空则return,

                del.value = '';

                del.focus()

                elt=del

            }

        }

    </script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容