回车键模拟Tab键失效：$(this).next('input').focus()表单内无法工作

我来帮你搞定这个焦点切换的问题！你已经成功触发了回车键事件，现在的核心问题是找下一个输入框的方式不对，咱们一步步来修正：

问题分析 #

你尝试的几种focus()定位方法都没命中目标：

• $(this).next('input')：你的输入框嵌套在col-sm-8容器里，同级没有其他input，所以找不到
• $(this).parent().next().find('.input-enter')：parent()是col-sm-8，它的同级是前面的label，next()找不到包含下一个input的容器
• $(this).closest('.input-enter').find('input')：当前input本身就有.input-enter类，closest()返回的是自己，find('input')自然找不到其他元素

解决方案 #

我们可以先把所有需要切换的输入框（带.input-enter类的）收集起来，然后通过索引定位找到下一个输入框，这样不管HTML结构怎么嵌套都能准确找到：

修改后的jQuery代码：

$(document).ready(function() {
    $('.input-enter').keypress(function(e) {
        if (e.which == 13) {
            // 获取所有需要切换的输入框
            const inputs = $('.input-enter');
            // 找到当前输入框在集合中的索引
            const currentIndex = inputs.index(this);
            // 计算下一个输入框的索引（循环切换，最后一个回到第一个）
            const nextIndex = (currentIndex + 1) % inputs.length;
            // 聚焦到下一个输入框
            inputs.eq(nextIndex).focus();
            
            e.preventDefault(); // 阻止默认的回车提交表单行为
            // alert("Enter key has been pressed!"); // 测试用，可移除
        }
    });
});

为什么这么做？ #

1. 用.input-enter选择器精准定位需要切换的输入框，避免影响页面上其他无关的input
2. 通过index()获取当前元素在集合中的位置，再用eq()定位下一个元素，逻辑清晰且不受HTML结构嵌套影响
3. 用(currentIndex + 1) % inputs.length实现循环切换，当在最后一个输入框按回车时，会回到第一个输入框

你的完整HTML（保留原结构） #

<form name='form' method='post'> 
    <div class='row'> 
        <div class='col-md-6'> 
            <div class='form-group row'> 
                <label class='col-sm-4 control-label text-primary' for='nickname'>First Name:</label> 
                <div class='col-sm-8'> 
                    <input id='nickname' type='text' name='txtfname' class='input-enter form-control'/> 
                </div> 
            </div> 
            <div id='div_name' class='form-group row'> 
                <label class='col-sm-4 control-label text-primary' for='nickname'>L:</label> 
                <div class='col-sm-8'> 
                    <input id='nickname' type='text' name='txtlname' class='input-enter form-control'/> 
                </div> 
            </div> 
        </div> 
        <div class='col-md-6'> 
            <div class='form-group row'> 
                <label class='col-sm-4 control-label text-primary' for='nickname'>First Name:</label> 
                <div class='col-sm-8'> 
                    <input id='nickname' type='text' name='txtfname' class='input-enter form-control'/> 
                </div> 
            </div> 
            <div id='div_name' class='form-group row'> 
                <label class='col-sm-4 control-label text-primary' for='nickname'>L:</label> 
                <div class='col-sm-8'> 
                    <input id='nickname' type='text' name='txtlname' class='input-enter form-control'/> 
                </div> 
            </div> 
        </div> 
    </div> 
</form>

这样修改后，按回车键就能顺利切换到下一个输入框啦！

内容的提问来源于stack exchange，提问作者wilson382