js+css模拟PC端淘宝支付密码输入框

weixin_51678651

于 2024-03-05 15:53:15 发布

阅读量247

点赞数 1

文章标签： javascript css 开发语言前端 vue.js html

本文链接：https://blog.csdn.net/weixin_51678651/article/details/136480463

版权

实际效果：

开始上代码：

（1）HTML

<div class="sltBox5">
								<div class="sltBox5-l">
									<h4>请输入交易密码</h4>
								</div>
								<div class="sltBox5-r">
									<img src='./img/0_.gif' />
									<input type="password" id="payPassword" maxlength="6" />
								</div>
							</div>

（2）CSS

.sltBox5{
	overflow: hidden; clear: both;
}
.sltBox5 .sltBox5-l h4{
	font-size: .95rem;
	font-weight: bold;
	color: #333333;
	margin: 0 0 .3rem 0;
}
.sltBox5 .sltBox5-l h5{
	font-size: .8rem;
	font-weight: normal;
	color: #777777;
	margin: 0;
}
.sltBox5 .sltBox5-l h5 a{
	display: inline;
}
.sltBox5-r{
	position:relative;width: 202px;height: 48px;
}
.sltBox5-r img{
	position: absolute;
	left: 0;
	top:0;
}
.sltBox5-r input{
	position: absolute;
	left:0;
	top:0;
	opacity: 0;
	width: 100%;
	height: 100%;
	border:0;
	padding: 0;
}

（3） JS

//密码输入
	$("input#payPassword").on('input propertychange',function(e){
			passLen = e.target.value.length
			$(".sltBox5-r img").attr("src",`./img/${passLen}.gif`);
	});
	// 控制密码框当前焦点
	$("#payPassword").blur(function(){
		var src = $(this).siblings("img").attr("src");
		src = src.replace(".gif","_.gif");
		$(this).siblings("img").attr("src",src);
	});
	$("#payPassword").focus(function(){
		var src = $(this).siblings("img").attr("src");
		src = src.replace("_.gif",".gif");
		$(this).siblings("img").attr("src",src);
	});