首页 新闻 搜索 专区 学院

支付密码框高亮问题

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>

Edward華的主页 Edward華 | 初学一级 | 园豆:143
提问于:2018-10-22 17:11
< >
分享
最佳答案
1

http://tools.jb51.net/regex/create_reg  

正则表达式

收获园豆:10
别让她难过 | 小虾三级 |园豆:1626 | 2018-10-22 17:21
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册