<!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>
效果：
