无需为每个<li>设置tabindex，如何让列表项可被Tab键聚焦？

核心思路：利用原生可交互属性让<li>自动可聚焦 #

既然你的列表项本身需要可编辑，直接给<li>设置contenteditable="true"即可——这类元素默认会被Tab键纳入聚焦序列，完全不需要手动设置tabindex。浏览器会自动按照DOM节点的顺序处理Tab导航，哪怕你通过快捷键调整了列表项的顺序，也不用修改任何聚焦相关的属性，浏览器会自动适配新的DOM结构。

示例基础结构：

<ul>
  <li contenteditable="true">可编辑列表项1</li>
  <li contenteditable="true">可编辑列表项2</li>
  <li contenteditable="true">可编辑列表项3</li>
</ul>

方向键聚焦的手动实现 #

Tab键的聚焦是原生支持的，但方向键（↑/↓）切换需要自己监听键盘事件来控制：

const editableItems = document.querySelectorAll('li[contenteditable="true"]');

editableItems.forEach(item => {
  item.addEventListener('keydown', (e) => {
    // 处理上箭头切换
    if (e.key === 'ArrowUp') {
      e.preventDefault(); // 阻止默认的光标上移行为
      const prevSibling = item.previousElementSibling;
      prevSibling?.focus();
    }
    // 处理下箭头切换
    else if (e.key === 'ArrowDown') {
      e.preventDefault();
      const nextSibling = item.nextElementSibling;
      nextSibling?.focus();
    }
  });
});

优化体验：添加聚焦样式 #

给聚焦的列表项加上视觉反馈，提升用户体验：

li[contenteditable="true"]:focus {
  outline: 2px solid #1976d2;
  background-color: #f0f7ff;
  border-radius: 4px;
}

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