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框 输完一个自动跳到下一个

转载于:https://www.cnblogs.com/ixiaohao/p/5216671.html