支付密码框高亮问题
0
悬赏园豆：10
[已解决问题]
解决于 2018-11-09 18:06
如题所问，现在实现了框框，现在想实现：
1.鼠标选中时，高亮选中第一个框框，变成红色边框；
2.高亮红色框框，跟着用户输入的最后一个数字移动，例如密码总共6位，用户输入了俩位，则第三个框框为红色，用户输完6位，则框框消失
html代码如下：
<!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>
最佳答案
1
http://tools.jb51.net/regex/create_reg
正则表达式
收获园豆：10
