HTML5表格Tab键焦点控制：如何实现Tab键始终在当前行内循环切换？

没问题，我来帮你搞定这个需求！下面是完整的实现代码，配合注释说明逻辑：

<table>
  <thead>
    <tr><th>表头1</th><th>表头2</th></tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable='true'></td>
      <td contenteditable='true'></td>
    </tr>
    <tr>
      <td contenteditable='true'></td>
      <td contenteditable='true'></td>
    </tr>
  </tbody>
</table>

<script>
document.addEventListener('keydown', function(e) {
  // 只处理Tab键事件
  if (e.key !== 'Tab') return;

  const activeElement = document.activeElement;
  // 检查当前焦点是否在可编辑的td上
  if (activeElement.tagName !== 'TD' || activeElement.contentEditable !== 'true') return;

  const currentRow = activeElement.parentElement;
  // 获取当前行所有可编辑的单元格
  const editableCells = Array.from(currentRow.querySelectorAll('td[contenteditable="true"]'));
  const currentIndex = editableCells.indexOf(activeElement);

  if (!e.shiftKey) {
    // 普通Tab：如果是最后一个单元格，跳转到第一个
    if (currentIndex === editableCells.length - 1) {
      e.preventDefault(); // 阻止默认的跳转到下一行行为
      editableCells[0].focus();
    }
  } else {
    // Shift+Tab：如果是第一个单元格，跳转到最后一个
    if (currentIndex === 0) {
      e.preventDefault();
      editableCells[editableCells.length - 1].focus();
    }
  }
});
</script>

代码逻辑说明： #

• 全局监听keydown事件，只对Tab键做出响应
• 先验证当前焦点元素是可编辑的<td>，避免干扰页面其他元素的Tab行为
• 获取当前单元格所在的行，以及该行所有可编辑的单元格列表
• 根据是否按下Shift键，分别处理正向/反向Tab的循环逻辑：
  • 正向Tab：当焦点在最后一个可编辑单元格时，阻止默认的下一行跳转，手动聚焦到该行第一个可编辑单元格
  • 反向Tab（Shift+Tab）：当焦点在第一个可编辑单元格时，阻止默认的上一行跳转，手动聚焦到该行最后一个可编辑单元格

这样就能完美实现仅在当前行内循环切换焦点的需求啦！

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