Chrome标签页焦点行为异常：Tab键无法正常聚焦页面元素

可能原因 #

• Chrome浏览器更新后，内置新标签页的隐藏元素（如Google服务快捷入口）被加入Tab导航序列，占据首个聚焦位置，导致自定义搜索栏需两次Tab才能被选中。
• 自定义新标签页的tabindex设置因浏览器更新失效，或页面存在未察觉的默认可聚焦元素（如隐藏的input、button）干扰导航顺序。
• Chrome的Tab键导航行为被扩展程序或浏览器设置修改，插件添加了隐形可聚焦元素。

解决方法 #

1. 优化自定义新标签页代码 #

• 将搜索栏的tabindex改为0：浏览器优先聚焦tabindex=0的元素（默认可聚焦顺序），tabindex=1易被内置元素干扰。修改示例：<input type="text" tabindex="0" ...>。
• 给页面中非必要的可聚焦元素添加tabindex="-1"，排除它们进入Tab导航序列，比如隐藏按钮、iframe等。
• 加入自动聚焦逻辑，页面加载后直接将焦点定位到搜索栏，无需手动按Tab。示例代码：

window.addEventListener('load', () => {
  document.querySelector('你的搜索栏选择器').focus();
});

2. 重置Chrome设置与排查插件 #

• 输入chrome://settings/reset进入重置页面，选择“恢复原始默认设置”，排除设置异常导致的导航问题。
• 禁用所有扩展程序，逐一排查是否有插件干扰Tab导航逻辑。

3. 调整地址栏Tab跳转设置 #

• 输入chrome://flags/#omnibox-tab-switcher，将该选项改为“Disabled”，避免地址栏按Tab时触发其他导航行为。

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