本文共 2638 字，大约阅读时间需要 8 分钟。

找了好多独立密码框架，都有各种各样的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'); })}