js 6位验证码输入自定义样式

html
         
         
         
         
       
       
       
css
#yzmmodal div.yzm-cont{
    margin-top: 20px;
    justify-content: space-between;
}
#yzmmodal div.yzm-cont input{
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 37px;
    border: none;
    outline: none;
    color: #fff;
}
#yzmmodal div.yzm-cont .my_input{
    width: 13%;
    height: 37px;
    outline: none;
    border: 1px solid rgba(140,140,140,1);;
    border-radius: 10px;
    caret-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}
#yzmmodal div.yzm-cont .my_input.available {
    border: 1px solid #0081db;
}
js
var valCodeInput = $('#val-code-input');
        var valCodeItems = $(".my_input");
        var regex = /^[\d]+$/;
        var valCodeLength = 0;
        valCodeInput.on('input propertychange change', (e) => {
            $(valCodeItems).each(function(i){
                if($(this).text() != ''){
                    $(this).addClass('available')
                } 
            })
            valCodeLength = valCodeInput.val().length;
            console.log("wode="+valCodeInput.val())
            if(valCodeLength == 6){
                console.log(valCodeLength)
                $(valCodeItems).addClass('available')
                $(valCodeItems[0]).text(valCodeInput.val()[0])
                $(valCodeItems[1]).text(valCodeInput.val()[1])
                $(valCodeItems[2]).text(valCodeInput.val()[2])
                $(valCodeItems[3]).text(valCodeInput.val()[3])
                $(valCodeItems[4]).text(valCodeInput.val()[4])
                $(valCodeItems[5]).text(valCodeInput.val()[5])
            }else{
                console.log(valCodeLength)
            }
            if(valCodeInput.val() && regex.test(valCodeInput.val())) {
                $(valCodeItems[valCodeLength - 1]).addClass('available'); 
                $(valCodeItems[valCodeLength - 1]).text(valCodeInput.val().substring(valCodeLength - 1, valCodeLength));
            } 
        })
        $(this).on('keyup', (e) => {
            if(e.keyCode === 8) {
                $(valCodeItems[valCodeLength]).removeClass('available');
                $(valCodeItems[valCodeLength]).text("");
            }
        });
        function checkForNum(obj) {
            obj.value = obj.value.replace(/[\D]/g, '');
        }
 
        $(".my_input").click(function(){
            $('#val-code-input').focus();
        })

你可能感兴趣的:(js 6位验证码输入自定义样式)