input text输完自动跳到下一个

应用场景：

短信验证码输入

效果：

input输入框，输入完以后自动跳转到下一个

思路：

1. 四个输入框
2. 进入聚焦到第一个输入框
3. 第一个输入框输完一个字符后自动聚焦到下一个输入框

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>

兼容IE的写法

参考 input text框 输完一个自动跳到下一个