仿支付宝微信支付密码框
HTML：使用label控制样式
CSS：设置input透明
JS：input输入时，让label中<li>显示"•"；
点击密码框清除密码。
实现效果如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
ul{
list-style: none;
}
.passwordLabel{
height: 30px;
clear: both;
}
.passwordLabel li{
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid #dedede;
margin-left: -1px;
}
.passwordDiv input{
width: 1px;
height: 1px;
opacity: 0;
border: 0;
}
</style>
</head>
<body>
<div class="passwordDiv">
<label for="ipt" class="passwordLabel">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</label>
<input type="password" id="password" name="password" maxlength="6" >
</div>
<script>
//密码框输入事件
$('.passwordDiv input').on('input', function(e) {
var number = 6;
var pw = $("input[name = 'password']").val();
var list = $('.passwordDiv ul li');
for(var i = 0; i < number; i++) {
if(pw[i]) {
$(list[i]).text('•');
} else {
$(list[i]).text('');
};
};
});
//点击密码框清除密码
$('.passwordDiv ul').click(function() {
$("input[name = 'password']").val('');
$('#password').focus();
$('.passwordDiv ul li').text('')
});
</script>
</body>
</html>
原文链接：https://www.cnblogs.com/nicoleyani/p/5954188.html
1035
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
