input六位输入密码框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style>
        .alieditContainer{position:relative;}
        .alieditContainer .i-text{position: absolute;color: #fff;opacity:0.2; 306px; height:48px; font-size:12px; left:0; -webkit-user-select:initial;  /*取消禁用选择页面元素*/z-index:9;  padding:0;  borde:0;}
        .alieditContainer .sixDigitPassword {306px; height:22px; cursor:text; background:#fff; outline:none; position:relative; padding:13px 0; border:1px solid #ddd; border-radius:5px;}
        .alieditContainer .sixDigitPassword i {50px; height:16px; float:left; display:block; padding:4px 0; border-left:1px solid #cccccc;}
        .alieditContainer .sixDigitPassword i:first-child{border-left:0;}
        .alieditContainer .sixDigitPassword i.active{background-image: url("https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif");background-repeat: no-repeat;background-position: center center; }
        .alieditContainer .sixDigitPassword b{display:block; margin:5px auto 4px auto; 7px; height:7px; overflow:hidden; display:none;/*visibility:hidden;*/ background:#000; border-radius:100%;}
        .alieditContainer .sixDigitPassword .guangbiao{50px; height:48px; position:absolute; display:block; left:0px; top:-1px; border:1px solid rgba(82, 168, 236, .8); border:1px solid #00ffff9; border-radius:5px; visibility:visible; -webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
    </style>
</head>
<body>
    <div class="alieditContainer" style="margin-left:220px;margin-top:100px;" id="payPassword_container">
          <span class="" style="margin-right:320px;">请输入支付密码</span>
          <input minlength="6" maxlength="6" tabindex="1" id="payPassword_rsainput" name="payPassword_rsainput" class="ui-input i-text" oncontextmenu="return false" onpaste="return false" oncopy="return false" oncut="return false" autocomplete="off" value="" type="password">
    
          <div class="sixDigitPassword" tabindex="0">

              <i class="active"><b></b></i>
              <i><b></b></i>
              <i><b></b></i>
              <i><b></b></i>
              <i><b></b></i>
              <i><b></b></i>
              <span class="guangbiao" style="left:0px;"></span>
          </div>
      </div>
    </div>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(window).ready(function() {
    
    $(".i-text").keyup(function()
    {
        var inp_v = $(this).val();
        
        var inp_l = inp_v.length;
        //$("p").html( "input的值为：" + inp_v +"; " + "值的长度为:" + inp_l);//测试用
        
        for( var x = 0; x<=6; x++)
        {
            $("p").html( inp_l );//测试
            
            $(".sixDigitPassword").find("i").eq( inp_l ).addClass("active").siblings("i").removeClass("active");
            $(".sixDigitPassword").find("i").eq( inp_l ).prevAll("i").find("b").css({"display":"block"});
            $(".sixDigitPassword").find("i").eq( inp_l - 1 ).nextAll("i").find("b").css({"display":"none"});
            
            $(".guangbiao").css({"left":inp_l * 51});//光标位置
            
            if( inp_l == 0)
            {
                $(".sixDigitPassword").find("i").eq( 0 ).addClass("active").siblings("i").removeClass("active");
                $(".sixDigitPassword").find("b").css({"display":"none"});
                $(".guangbiao").css({"left":0});
            }
            else if( inp_l == 6)
            {
                $(".sixDigitPassword").find("b").css({"display":"block"});
                $(".sixDigitPassword").find("i").eq(5).addClass("active").siblings("i").removeClass("active");
                $(".guangbiao").css({"left":5 * 51});
                
            }            
        }
    });
    
});


</script>
效果：