HTML支付密码输入框（已实现）

最新推荐文章于 2024-05-31 07:17:54 发布

ansheng02

最新推荐文章于 2024-05-31 07:17:54 发布

阅读量8.8k

点赞数 5

分类专栏：前端相关手记 JS 前端HTML效果文章标签：支付密码框

本文链接：https://blog.csdn.net/ansheng02/article/details/84637356

版权

前端相关手记同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

前端HTML效果

10 篇文章 0 订阅

订阅专栏

密码输入框思路梳理：

a：用lable包裹li标签和input框；

b：input设置最大输入值为6；

c：用input框的输入值分别遍历到6个li标签中；

代码需要引入jQuery代码：http://libs.baidu.com/jquery/2.1.4/jquery.min.js

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>支付密码输入框</title>
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<style type="text/css">
		ul,li{
			list-style: none;
		}
		.password-div input{
			width: 1px;
			height: 1px;
			opacity: 0;
			border: 0;
		}
		.password-lable{
			height: 30px;
			clear: both;
		}
		.password-lable li{
			float: left;
			width: 30px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border: 1px solid #dedede;
			margin-left: -1px;
		}

	</style>
</head>
<body>
	<div class="password-div">
		<label for="password" class="password-lable">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<input id="password" type="password" name="password" maxlength="6">
		</label>
	</div>
</body>
</html>

我将JS代码拿出来，单独写下

<script type="text/javascript">
	$(".password-div input").on("input",function(e){ //标签为password-div下的input添加oninput事件
		var number = 6;   //定义输入最大值
		var pw = $("input[name = 'password']").val(); //定义pw为name是password的input框的输入值
		var list = $(".password-div ul li");  //定义list是li
		for(var i = 0; i < number ; i++){    //for循环遍历将·放入li标签
			if(pw[i]){
				$(list[i]).text("·");
			}else{
				$(list[i]).text("");
			};
		};
	});
	$(".password-div ul").click(function(){      
		$("input[name = 'password']").val("");
		$("#password").focus();
		$(".password-div ul li").text("");
	});
</script>

ansheng02

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
HTML支付密码输入框（已实现）

密码输入框思路梳理： a：用lable包裹li标签和input框； b：input设置最大输入值为6； c：用input框的输入值分别遍历到6个li标签中；代码需要引入jQuery代码：http://libs.baidu.com/jquery/2.1.4/jquery.min.jsHTML代码如下：&lt;!DOCTYPE htm...
复制链接

扫一扫