如何禁用网页中键盘Tab键选中触发按钮的功能

实现方案 #

方案1：设置tabindex属性跳过目标元素的Tab聚焦

给不需要被Tab选中的按钮添加tabindex="-1"属性，Tab键跳转时会直接跳过这些元素，同时不会响应回车触发点击事件，是最常用的轻量实现方案。
示例代码：

<button tabindex="-1">First Button</button>
<button tabindex="-1">Second Button</button>
<button tabindex="-1">Third Button</button>

如果需要批量处理页面所有按钮，可通过JS统一添加属性：

document.querySelectorAll('button').forEach(btn => {
  btn.setAttribute('tabindex', '-1')
})

方案2：全局拦截Tab键默认行为（不推荐）

如果需要完全禁用整个页面的Tab选中功能，可以监听全局键盘事件，拦截Tab键的默认导航逻辑：

document.addEventListener('keydown', e => {
  if(e.key === 'Tab') {
    e.preventDefault()
  }
})

注意：该方案会完全禁用页面的Tab导航能力，严重影响依赖键盘操作的用户体验，非特殊场景不建议使用。

方案3：禁用元素的焦点响应

如果需要避免其他操作（比如点击后自动聚焦）带来的选中效果，可额外监听元素的focus事件主动失焦：

document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('focus', () => {
    btn.blur()
  })
})

提示：默认的Tab聚焦是网页可访问性的核心功能之一，面向普通用户的公开站点不建议全局移除该能力，仅可在特定内部系统、专用场景下按需使用。

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