应用场景：
短信验证码输入
效果：
input输入框，输入完以后自动跳转到下一个
思路：
- 四个输入框
- 进入聚焦到第一个输入框
- 第一个输入框输完一个字符后自动聚焦到下一个输入框
1.四个输入框
<input type="text" name="sn1" id="sn1"/>
<input type="text" name="sn2" id="sn2"/>
<input type="text" name="sn3" id="sn3"/>
<input type="text" name="sn4" id="sn4"/>
2. 文档加载完成后聚焦到第一个输入框
$(function(){
$("#sn1").focus();
})
3.用jquery获取到这四个输入框，遍历四个输入框，如果发生输
入事件，判断输入框内的值。如果小于1个字符，那么前一个输入
框获取到焦点；如果大于或者等于一个字符，那么后一个输入框
获取到焦点。这样就完成了input自动跳到下一个输入框。
$("input[name^='sn']").each(function(){
$(this).keyup(function(e){
if($(this).val().length < 1){
$(this).prev().focus();
}else{
if($(this).val().length >= 1){
$(this).next().focus();
}
}
});
});
修复
如果不限定input输入框的长度，或出现输入完后可再输入的情况。
<input type="text" name="sn1" maxlength="1" id="sn1"/>
<input type="text" name="sn2" maxlength="1" id="sn2"/>
<input type="text" name="sn3" maxlength="1" id="sn3"/>
<input type="text" name="sn4" maxlength="1" id="sn4"/>
<script type="text/javascript">
$(function(){
$("#sn1").focus();
//自动跳到下一个输入框
$("input[name^='sn']").each(function(){
$(this).keyup(function(e){
if($(this).val().length < 1){
$(this).prev().focus();
}else{
if($(this).val().length >= 1){
$(this).next().focus();
}
}
});
});
});
</script>
完善
<input type="text" name="sn1" maxlength="1" id="sn1"/>
<input type="text" name="sn2" maxlength="1" id="sn2"/>
<input type="text" name="sn3" maxlength="1" id="sn3"/>
<input type="text" name="sn4" maxlength="1" id="sn4"/>
<script type="text/javascript">
$(function(){
$("#sn1").focus();
function device_verify(){
console.log($("#sn1").val()+$("#sn2").val()+$("#sn3").val()+$("#sn4").val());
}
//自动跳到下一个输入框
$("input[name^='sn']").each(function(){
$(this).keyup(function(e){
if($(this).val().length < 1){
$(this).prev().focus();
}else{
if($(this).val().length >= 1){
$(this).next().focus();
}
}
});
});
$("input[type='text'][id^='sn']").bind('keyup',
function() {
var len = $("#sn1").val().length + $("#sn2").val().length + $("#sn3").val().length + $("#sn4").val().length;
if (len == 4) device_verify();
});
});
</script>