jQuery简单实现六位密码输入框这个小玩意，简单到不想赘述，上代码吧还是。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width:480px;height:62px;margin:200px auto 80px;text-align: center;}
#box input{
width:60px;
height:60px;
line-height: 60px;
display: inline-block;
border:1px solid #e3e3e3;
background-color: #f5f5f5;
text-align: center;
font-size: 24px;
font-weight: bold;
}
button{
display: block;
padding:7px 25px;
margin:auto;
border:1px solid #f43b51;
background-color: #F43B51;
color: white;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
}
button:hover{opacity: 0.7;}
</style>
</head>
<body>
<div id="box">
<input type="text" name="password" value="" maxlength="1"/>
<input type="text" name="password" value="" maxlength="1" disabled="disabled"/>
<input type="text" name="password" value="" maxlength="1" disabled="disabled"/>
<input type="text" name="password" value="" maxlength="1" disabled="disabled"/>
<input type="text" name="password" value="" maxlength="1" disabled="disabled"/>
<input type="text" name="password" value="" maxlength="1" disabled="disabled"/>
</div>
<button id="reset" type="reset">重置</button>
<script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var passwordStr = '';
$(document).ready(function(){
$("#box input").eq(0).focus();
$("#box input").keyup(function(){
if(!parseInt($(this).val())){
$(this).val('');
return false;
}
if(parseInt($(this).index())+1<=$("#box input").length){
passwordStr += $(this).val();
console.log(passwordStr);
$(this).blur();
$(this).val('❤');
$(this).attr('disabled','true');
if(parseInt($(this).index())+1<=$("#box input").length){
$(this).next('input').removeAttr('disabled');
$(this).next('input').focus();
}
}
});
$("#reset").click(function(){
$("#box input").val('');
$("#box input").attr('disabled','disabled');
$("#box input").eq(0).removeAttr('disabled');
$("#box input").eq(0).focus();
passwordStr = '';
});
});
</script>
</body>
</html>
485
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
