Html 为什么tab键盘导航无法使用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

）

我不明白为什么在Javascript中执行

myCell.focus（）

时，光标不会出现在相关单元格中，即使该单元格成为

activeElement

，并且整个表具有

contenteditable=“true”

---

最好在每个

td

s中使用

input

元素，然后使用此功能：

js

html

---

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

<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>

---

此外，我认为如果在每个“td”元素中使用“input”，则不需要任何js代码。因为Tab键可以做到这一点，所以它为您自己。但是我写的函数，可以处理每一个KIE。你只需要把9换成你想要的其他kies谢谢你的回复。我考虑过，但它不适合我的需要。表格单元格需要能够包含复杂的元素和标记，如图像、自定义元素等。。不仅仅是文字。另外，我在其他地方看到它只与表格单元格一起工作，所以我相信它是可以做到的。最后，我不使用jQuery.Ok。我认为你的代码和你写的一样简单。无论如何，如果你想提供更多帮助，我建议你写完整的代码，并提供足够的解释，这样我们就可以帮助你。我想我发布了显示问题的最低要求，但也许你是对的。即使是简单的文本内容，输入也有问题，因为它们不能像用户大量键入时表格单元格那样扩展以适应内容。我想我已经找到了解决问题的办法。我把它贴在这里了。

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

<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>