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

Question

考虑这个 HTML table:

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

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

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

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

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

JSFiddle example

Answer 1

最好在每个td中使用input个元素，然后使用这个函数：

js

    $('td').bind('keypress', function(event) {
     if(event.which === 9) {
        if ($(this).next().length > 0){
            $(this).next().find("input").focus();
        }else{
             $(this).parent().next().find('td').first().find("input").focus();
        }

});

html

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

Answer 2

为了在 Chrome 76 和 Firefox 68 上使用 tab 键，我需要将 table 本身设置为不是 editable，然后还要将每个单元格设置为editable:

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

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

Why is tab keyboard navigation not working with tabIndex set?

html

html-table

contenteditable