页面最后一个可聚焦元素触发focus()失效，求原因解析

问题场景 #

当表单的提交按钮是页面最后一个可聚焦元素时，代码如下：

<body>
    <form>
        <input type="text" name="text">
        <input type="submit" name="submit">
    </form>
</body>

为了让用户按Tab键离开提交按钮时，焦点仍保持在表单内，编写了如下事件监听代码：

form.submit.addEventListener('blur',() => {
    form.text.focus();
});

此时焦点并未回到文本输入框，反而跳转到了浏览器地址栏。但如果在表单后添加另一个可聚焦元素（比如按钮），代码如下：

<body>
    <form>
        <input type="text" name="text">
        <input type="submit" name="submit">
    </form>

    <button>Click Me</button>
</body>

功能就恢复正常了，请问这一现象的原因是什么？

原因分析 #

这是浏览器内置的Tab焦点循环机制导致的：

• 当页面中最后一个可聚焦元素失去焦点时，浏览器默认会把焦点跳转到页面外的浏览器控件（比如地址栏），这是浏览器原生的焦点导航逻辑。
• 在blur事件里调用focus()试图拦截这个行为时，时机晚于浏览器的默认Tab导航动作——浏览器已经触发了跳转到地址栏的逻辑，后续的focus()调用会被忽略，无法覆盖默认行为。
• 当表单后存在其他可聚焦元素时，按Tab键的默认行为是把焦点移动到这个页面内的新元素上，此时blur事件中调用form.text.focus()会优先生效，覆盖了默认的焦点跳转，所以焦点能正确回到文本输入框。

简单来说：没有后续可聚焦元素时，浏览器直接跳转到自身UI，你的拦截代码赶不上这个默认逻辑；有后续可聚焦元素时，默认动作是在页面内跳转，此时拦截代码能成功覆盖默认行为。

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