验证码自动聚焦下一个,效果如图所示,主要用到聚焦方法和获取下一个元素方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<style type="text/css">
body{
background-color: #E6E6FA;
}
.center{
display: flex;
width: 400px;
height: 400px;
margin: 0 auto;
}
input{
flex: 1;
height: 100px;
font-size: 40px;
text-align: center;
}
.now{
width:70px;
heigth:70px;
border:1px #cccccc solid;
}
.now:focus{
border:1px #587d18 solid;
}
</style>
<body>
<img src='验证码地址'>
<div class="center">
<input type='text' name='code[]' class='now' maxlength="1"/>
<input type='text' name='code[]' class='now' maxlength="1"/>
<input type='text' name='code[]' class='now' maxlength="1"/>
<input type='text' name='code[]' class='now' maxlength="1"/>
</div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('.now').keyup(function(){
if($(this).index()<4) {
$(this).next('input').focus();
}
});
</script>
</body>
</html>