accesskey在Safari触发表格首行Chrome触发末行，如何让Chrome也触发首行？

问题根因 #

HTML规范中没有明确定义同一页面存在多个相同accesskey属性元素时的选择优先级，不同浏览器内核实现逻辑不同：

• Safari 遍历时匹配到第一个符合条件的元素就停止，因此触发第一行按钮
• Chrome 会遍历所有符合条件的元素，最终选中最后一个匹配的元素，因此触发最后一行按钮

解决方案 #

这里提供两种可落地的实现方案：

方案1：自定义全局快捷键监听（兼容性最好） #

主动覆盖浏览器原生accesskey行为，统一所有浏览器的触发逻辑，始终触发第一行对应按钮：

document.addEventListener('keydown', function(e) {
  // 仅匹配 ctrl+alt 组合快捷键
  if (!(e.ctrlKey && e.altKey)) return
  let targetBtn = null
  switch(e.key.toLowerCase()) {
    case 'e':
      targetBtn = document.querySelector('button[accesskey="e"]')
      break
    case 'd':
      targetBtn = document.querySelector('button[accesskey="d"]')
      break
    case 's':
      // 仅匹配显示状态的保存按钮
      targetBtn = document.querySelector('button[accesskey="s"]:not([style*="display:none"])')
      break
    case 'c':
      // 仅匹配显示状态的取消按钮
      targetBtn = document.querySelector('button[accesskey="c"]:not([style*="display:none"])')
      break
    default:
      return
  }
  if (targetBtn) {
    // 阻止浏览器默认accesskey行为
    e.preventDefault()
    // 触发按钮点击逻辑
    targetBtn.click()
  }
})

方案2：仅保留第一行按钮的accesskey属性 #

如果你只需要快捷键触发第一行按钮，不需要为其他行按钮提供快捷键支持，直接在生成表格行时，仅给第一行的按钮添加accesskey属性，其余行按钮不添加该属性即可，不需要额外写JS逻辑。

额外优化建议 #

你当前提供的按钮代码存在重复ID的问题：同一页面内ID必须唯一，你每行都使用bEdit/bElim等同名ID会导致DOM选择逻辑异常，建议把ID改为类名，比如class="btn bEdit btn-sm btn-outline-secondary"。

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