jQuery实现Tab键从#input1跳转时跳过#input2并定位正确输入框

针对你的需求，我整理了一个简洁且可靠的实现方案，完美贴合「Tab跳过input2、根据input3可见性切换聚焦目标、允许手动聚焦input2」这些要求：

核心思路拆解 #

1. 用原生HTML属性控制Tab流：给#input2设置tabindex="-1"，这是最标准的方式——浏览器会自动跳过它的Tab导航，但依然允许手动点击聚焦。
2. 拦截input1的Tab事件：监听#input1的keydown事件（要在默认Tab行为触发前拦截），判断是否是正向Tab（非Shift+Tab），然后根据#input3的可见性决定聚焦目标。

具体实现步骤 #

1. 修改HTML中的input2属性

把#input2的tabindex改成-1，替换原来的tabindex="4"：

<input type="text" name="input2" id="input2" class="form-control" tabindex="-1">

2. 编写JavaScript逻辑

// 监听input1的keydown事件，捕获Tab键操作
$('#input1').on('keydown', function(e) {
    // 只处理正向Tab（排除Shift+Tab的反向跳转）
    if (e.keyCode === 9 && !e.shiftKey) {
        // 阻止浏览器默认的Tab跳转行为
        e.preventDefault();
        
        // 判断input3是否可见（jQuery的:visible会检查display/visibility和元素尺寸）
        const shouldFocusInput3 = $('#input3').is(':visible');
        
        // 选择要聚焦的目标元素
        const target = shouldFocusInput3 ? $('#input3') : $('#label');
        
        // 执行聚焦
        target.focus();
    }
});

为什么这个方案更好？ #

• 原生属性更可靠：用tabindex="-1"控制Tab流，比纯JS拦截所有Tab事件更稳定，也符合Web标准。
• 事件时机正确：用keydown而不是keyup，因为Tab的默认跳转是在keydown阶段触发的，提前拦截才能避免默认行为生效。
• 逻辑清晰简洁：直接针对#input1的Tab操作做处理，不会影响其他输入框的正常Tab流。

这样实现后，完全符合你的所有需求：从#input1按Tab会直接跳到#input3（如果可见）或#label，#input2只能通过手动点击聚焦，不会被Tab键选中。

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