时间戳

首页 > 解决方案 > 为什么选项卡键盘导航不适用于 tabIndex 集？

html - 为什么选项卡键盘导航不适用于 tabIndex 集？

问题描述

考虑这个 HTML 表格：

<table contenteditable="true">
  <tbody>
  <tr>
    <td tabindex="0"></td>
    <td tabindex="0"></td>
    <td tabindex="0"></td>
  </tr>
  <tr>
    <td tabindex="0"></td>
    <td tabindex="0"></td>
    <td tabindex="0"></td>
  </tr>
  </tbody>
</table>

我希望用户能够在编辑表格内容时从一个单元格切换到另一个单元格，并以编程方式关注任何给定的单元格。我在 Chrome 中观察到以下行为，我正在尝试理解和纠正它们：

我不明白为什么如果我将光标放在一个单元格中并按下tab键，光标不会转到下一个单元格。

我不明白为什么当我单击一个单元格时，虽然光标出现并且我可以编辑它的内容，但焦点似乎仍然在整个表格上，而不是专门在那个单元格上（通过控制台日志记录发现document.activeElement）

我不明白为什么当我myCell.focus()在 Javascript 中执行时，光标不会出现在有问题的单元格中，即使单元格变成了activeElement并且整个表格都有contenteditable="true"

JSFiddle 示例

标签： htmlhtml-tablecontenteditable

解决方案

要在 Chrome 76 和 Firefox 68 上使用标签，我需要将表格本身设置为不可编辑，然后还要将每个单元格设置为可编辑：

<table contenteditable="false">
  <tbody>
  <tr>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
  </tr>
  <tr>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
  </tr>
  </tbody>
</table>

JSFiddle 示例

推荐阅读