<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>验证码输入自动聚焦下一个input或者删除自动聚焦上一个input</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();
}
});
*/ $("input[name^='code']").each(function(){
$(this).keyup(function(e){
if($(this).val().length < 1){
$(this).prev().focus();
}else{
if($(this).val().length >= 1){
$(this).next().focus();
}
}
}); }); </script>
</body> </html>