仿支付宝密码输入框(光标用的是一个竖线闪动的图片)代码,Js代码库,德仔网

代码语言
代码分类
【Js】仿支付宝密码输入框(光标用的是一个竖线闪动的图片)
作者:瑞祺 / 发布于2016/5/19/ 884
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿支付宝密码输入框</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>

<style>
.alieditContainer{position:relative;}
.alieditContainer .i-text{position: absolute;color: #fff;opacity:0.2; width:306px; height:48px; font-size:12px; left:0; -webkit-user-select:initial;  /*取消禁用选择页面元素*/z-index:9;	padding:0;	borde:0;}
.alieditContainer .sixDigitPassword {width:306px; height:22px; cursor:text; background:#fff; outline:none; position:relative; padding:13px 0; border:1px solid #ddd; border-radius:5px;}
.alieditContainer .sixDigitPassword i {width: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; width:7px; height:7px; overflow:hidden; display:none;/*visibility:hidden;*/ background:#000; border-radius:100%;}
.alieditContainer .sixDigitPassword .guangbiao{width:50px; height:48px; position:absolute; display:block; left:0px; top:-1px; border:1px solid rgba(82, 168, 236, .8); border:1px solid #00ffff\9; 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>

<div class="alieditContainer" id="payPassword_container">
    <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>



<script>
$(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>

</body>
</html>
试试其它关键字
同语言下
可能有用的
瑞祺贡献的其它代码(25)