六位数字输入框(适用于填写验证码)

这几天闲得无聊，心血来潮逛了一下苹果的官网，然后进行登录的时候发现需要输入手机号验证码，于是就有了下图 ~ ~ ， 这种六位数字框瞬间就感觉很大气有木有 ??
于是心血来潮仿造了一个。

这是我自己仿出来的
样式有点丑/(ㄒoㄒ)/~~
可以拦截非数字输入，有一个BUG没有解决，就是输入法中中文状态下无法实现自动位移， 因为接受到的键盘Ascii被输入法篡改了，暂时想不出解决办法，欢迎指导。

首先你需要写一个映射键盘Ascii码的Js文件，下述会引用到。

const codes = new Array()
codes[96] = 0;
codes[97] = 1;
codes[98] = 2;
codes[99] = 3;
codes[100] = 4;
codes[101] = 5;
codes[102] = 6;
codes[103] = 7;
codes[104] = 8;
codes[105] = 9;
codes[48] = 0;
codes[49] = 1;
codes[50] = 2;
codes[51] = 3;
codes[52] = 4;
codes[53] = 5;
codes[54] = 6;
codes[55] = 7;
codes[56] = 8;
codes[57] = 9;

这是CSC 文件

#code_vessel{

            font-size: 0;
            width: auto;
            margin: 0 auto;
            margin-top: 20%;

        }
        .code_frame{


            margin-left: 10px;
            font-size: 0;
            display: inline-block;
            width: 49px;
            height: 49px;

        }

        .code_input{

            border: 1px solid darkgray;
            background: cornsilk;
            font-size: 28px;
            width: 44px;
            height: 44px;
            border-radius: 3px 3px 3px 3px;
            text-align: center;
            box-shadow: 0 5px 10px 2px rgba(0,0,0,.1);
        }
        

HTML 结构

 <div id="code_vessel" align="center">
            <div class="code_frame">
                <input class="code_input" id="char1"  data-index="0"  maxlength="1" >
            </div>
            <div class="code_frame">
                <input class="code_input" id="char2"  data-index="1"  maxlength="1">
            </div>
            <div class="code_frame">
                <input class="code_input" id="char3"  data-index="2"  maxlength="1">
            </div>
            <div class="code_frame">
                <input class="code_input" id="char4"  data-index="3"  maxlength="1">
            </div>
            <div class="code_frame">
                <input class="code_input" id="char5"  data-index="4"  maxlength="1">
            </div>
            <div class="code_frame">
                <input class="code_input" id="char6"  data-index="5"  maxlength="1">
            </div>
        </div>

Js文件（Js + Jquery 混编） 注意需要引入上述的映射键盘Ascii码Js文件与Jquery

window.onload=function () {
      
        binding_event_code_input()
    }
    
    
    
    function binding_event_code_input() {
        let elems = document.getElementsByClassName("code_input");

        for(var i = 0;i<elems.length;i++){
            $(elems[i]).keydown(function (ev) {
                return event_code_input(ev,this)
            })
            $(elems[i]).focus(function () {
                if(this.value.length>0){
                    this.select();
                }
            })
        }


    }
    
    function event_code_input(ev,elem) {
        let code = ev.keyCode

        if(!(code>=48&&code<=57) && !(code>=96&&code<=105) && code !=8 && code!=37 && code!=39 && code!=9){
            return false;
        }
        //放行TAB 键
        if(code == 9){
            return true
        }


        let index = elem.getAttribute("data-index")

        switch (code) {


            case 8:
                if(elem.value.length>0){
                    elem.value=""
                    return false;
                }
                if(index>0){
                    elem.parentElement.previousElementSibling.firstElementChild.value=""
                    $(elem.parentElement.previousElementSibling.firstElementChild).focus()
                    return false
                }


            case 37:
                if(index>0){$(elem.parentElement.previousElementSibling.firstElementChild).focus()}
               return false
            case 39:
                if(index<5){$(elem.parentElement.nextElementSibling.firstElementChild).focus()}
                return false

            default:
                elem.value=codes[code]
                if(index<5){$(elem.parentElement.nextElementSibling.firstElementChild).focus()}
                return false
        }


    }

前端新手一枚，浅学了一下前端，代码写的可能有点不符合规范，勿喷！