<!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>
