六位独立密码框

找了好多独立密码框架，都有各种各样的bug，自己完善的密码框，希望能有人能用上！

html代码：

<div class="content">
       <form action="" method="get" id="pass_input">
           <div class="input_box">
               <span>支付密码：</span>
               <div class="box">
                   <input type="text" name=""  class="pass one" onselectstart="return false" autocomplete="off" οnfοcus="this.type='password'"/>
                   <input type="text" name="" class="pass two" autocomplete="off" οnfοcus="this.type='password'"/>
                   <input type="text" name=""  class="pass three" autocomplete="off" οnfοcus="this.type='password'"/>
                   <input type="text" name=""  class="pass four" autocomplete="off" οnfοcus="this.type='password'"/>
                   <input type="text" name=""  class="pass five" autocomplete="off" οnfοcus="this.type='password'"/>
                   <input type="text" name=""  class="pass six" autocomplete="off" οnfοcus="this.type='password'"/>
                   <i class="am-icon-eye-slash eyeBtn"></i>
                   <div style="clear: both"></div>
               </div>
               <p class="hide">请输入六位数字密码</p>
           </div>
           <div class="content_input">
               <button type="button" class="btn_dredge" οnclick="confirm()">确 定</button>
           </div>
       </form>

   </div>

js代码:

/*密码组件*/
   (function(){
    var txts = document.getElementsByClassName('pass');
    pass(txts);/*密码框*/
    var icon = $(".eyeBtn");
    var passEye = $(".pass");
    eye(icon,passEye);/*眼睛操作*/
    $(".one").focus(function(){
    $(this).css("border-color","#51bef5")
    })
   })();

function pass(txts){
    for (var i = 0; i < txts.length; i++) {
        var t = txts[i];
        var _this = this;
        t.index = i;
        t.setAttribute("readonly", true);
        t.onkeyup = function (e) {
            if (e.keyCode == 8) { /*删除*/
                if (this.value == "") {
                    var prop = this.index - 1;
                    if (prop < 0) return;
                    txts[prop].removeAttribute("readonly");
                    txts[prop].removeAttribute("disabled");
                    txts[prop].style = "border-color:#51bef5";
                    txts[prop].focus();
                    this.setAttribute("readonly", true);
                    this.setAttribute("disabled", true);
                    this.style = "border-color:#ddd";
                    this.value = "";
                }
            } else {
                if (this.value == "") {
               
                } else {
                    reg = /^[0-9]*$/; /*填写*/
                    if (!reg.test(this.value)) {
                        this.value = "";
                        return false;
                    }
                    this.value = this.value.substr(-1);
                    var next = this.index + 1;
                    if (next > txts.length - 1) return;
                    this.setAttribute("readonly", true);
                    this.setAttribute("disabled", true);
                    this.style = "border-color:#ddd";
                    txts[next].removeAttribute("readonly");
                    txts[next].removeAttribute("disabled");
                    txts[next].style = "border-color:#51bef5";
                    txts[next].focus();
                }
            }
        }
    }
    txts[0].removeAttribute("readonly");
}


//眼睛提示
function eye(icon,passEye){
icon.mousedown(function () {
icon.removeClass("am-icon-eye-slash").addClass("am-icon-eye");
   passEye.attr('type', 'number');
})
icon.mouseup(function () {
  icon.removeClass("am-icon-eye").addClass("am-icon-eye-slash");
   passEye.attr('type', 'password');
})
}