短信验证码input框border特效（仿探探注册）

js代码

$("#pwd-input").on("input", function() {
            var $input = $(".four-input input");
            var pwd = $(this).val().trim();
            var i = 0;
            for (i, len = pwd.length; i < len; i++) {
                $input.eq("" + i + "").val(pwd[i]);
                $(".four-input #input"+(i+1)).addClass("bor-input");
                $(".four-input #input"+(i)).removeClass("bor-input");
            }
            $input.each(function() {
                var index = $(this).index();
                if (index >= len) {
                    $(this).val("");
                    $(".four-input #input"+(i+1)).removeClass("bor-input");
                    if(i == 0){
                        $(".four-input #input1").addClass("bor-input");
                    }
                }
            });
            if (len == 4) {
                var message = $("#pwd-input").val();//输入的验证码
                if(message!=code){
                    mui.toast("验证码错误");
                    $(".four-input input").removeClass("bor-input");
                     setTimeout(function(){
                         $(".four-input input").each(function() {//验证码错误清空文本框
                            $(this).val("");
                        });
                         $("#pwd-input").val("");
                        $("#input1").addClass("bor-input");
                    },500);
                }else{
                    $(".next-btn").prop("disabled",false);//去除禁用
                }
            }else{
                $(".next-btn").prop("disabled",true);//禁用
            }
        });

 

 html代码
  <div class="pwd-box">
                <input type="tel" maxlength="4" class="pwd-input" id="pwd-input" />
                <div class="four-input">
                    <input maxlength="1" id="input1" type="text" class="all-input bor-input" readonly="" />
                    <input maxlength="1" id="input2" type="text" class="all-input" readonly="" />
                    <input maxlength="1" id="input3" type="text" class="all-input" readonly="" />
                    <input maxlength="1" id="input4" type="text" class="all-input" readonly="" />
                </div>
            </div>