按钮加 tabindex="0" 后方向键无反应，因原生 HTML 不支持方向键切换焦点，需手动监听 keydown 并调用 focus()；可复用函数应基于 data-nav-group 分组、维护当前索引、循环计算目标并聚焦，注意移动端不适用、屏幕阅读器需语义正确。
为什么给按钮加 tabindex="0" 后方向键没反应
因为浏览器根本不会用方向键切换按钮焦点——tabindex="0"只让按钮进入 Tab 流，方向键行为完全不被默认支持。你看到的“按方向键能切”其实是某些 UI 框架或自定义逻辑实现的，原生 HTML 没这功能。
常见错误现象：button 全部设了 tabindex="0"，用户按 ←→ 却毫无响应，只能靠 Tab 键线性跳转；或者误以为 role="menuitem" 自带方向导航，结果发现没监听事件照样不动。
- 方向键焦点切换必须手动监听
keydown，且必须调用.focus() -
event.key优先用"ArrowLeft"/"ArrowRight"，别依赖已废弃的keyCode - 别在
keyup里处理方向键——按键松开时焦点可能已移走，响应延迟或丢失
怎么写一个可复用的方向键焦点管理函数
核心是维护当前聚焦索引，并在方向键触发时计算下一个目标按钮并聚焦。不需要框架，几行 JS 就够：
const buttons = document.querySelectorAll('button[data-nav-group="main"]');
let currentIndex = Array.from(buttons).findIndex(btn => btn === document.activeElement);
document.addEventListener('keydown', (e) => {
if (!buttons.length || !['ArrowLeft', 'ArrowRight'].includes(e.key)) return;
e.preventDefault();
const step = e.key === 'ArrowRight' ? 1 : -1;
currentIndex = (currentIndex + step + buttons.length) % buttons.length;
buttons[currentIndex].focus();
});
注意点：
立即学习“前端免费学习笔记（深入）”；
- 用
data-nav-group区分不同按钮组，避免全局冲突 - 用
(currentIndex + step + length) % length实现循环，防止越界后.focus()失败静默吞掉事件 - 别每次都在事件里查
document.activeElement——先缓存索引，避免重排
多个按钮组共存时如何避免互相干扰
比如页面有顶部导航栏、侧边操作栏、底部工具条三组按钮，按 ←→ 时只想在当前组内切，不能跨组跳。
关键不是监听全局 keydown，而是把事件委托到容器上：
<div class="nav-group" data-nav-id="header"> <button>首页</button> <button>关于</button> </div> <div class="nav-group" data-nav-id="sidebar"> <button>编辑</button> <button>删除</button> </div>
然后为每个容器单独绑定：
- 监听容器的
keydown，而非document - 用
e.target.closest('.nav-group')判断当前在哪组里 - 只对当前组内的按钮做索引计算和聚焦，其他组完全隔离
- 如果某组只有一个按钮，直接忽略方向键（避免无意义的
.focus()）
移动端和屏幕阅读器要注意什么
方向键在触屏设备上根本不存在，这套逻辑默认不生效——这是正确行为，别强行模拟 touch 事件去“补全”。但屏幕阅读器用户仍可能用方向键浏览，所以语义不能丢。
- 确保按钮有明确角色，如
<button>不用额外加role="button"；但如果是<div tabindex="0">，必须补role="button"和aria-label - 别用
tabindex="-1"给按钮——它会踢出 Tab 流，导致键盘用户根本进不来 - 焦点样式要清晰：用
:focus-visible而非:focus，避免鼠标点击时也出现蓝框 - 如果按钮被
display: none或visibility: hidden，.focus()会失败，得先确保它可渲染
最常被忽略的点：方向键逻辑只解决“切焦点”，不解决“触发动作”。Enter/Space 还得单独监听，且对 Space 必须 e.preventDefault()，否则页面会滚动。
