错误的元素集中在 Chrome

Question

在我的 javascript 网络应用程序中，我有一个带有自定义单元格的 table，具有读取模式（简单标签）和双击（输入）编辑模式。当我处于编辑模式时，焦点设置在包含输入（在 td 中）的 div 上，然后我可以使用 TAB 键移动到另一个单元格。当我处于阅读模式时，焦点始终设置在包含标签的 div 上，我可以使用 TAB 和箭头移动到另一个单元格。这在 Explorer 中完美运行，但在 Chrome 中，在阅读模式下，焦点是不同的：一直设置在 table 元素上，然后我不能使用 TAB 和箭头移动到另一个单元格。我也试过强制焦点设置间隔：

$("#iddiv").focus()

问题就在Chrome

<table>
<tbody>
<tr>
<td>
<div class='...'>
<label></label>
</div>
</td>
......
</tr>
</tbody>
</table>

Answer 1

在 <div> 上设置 tabindex="0" 的属性（发现技术 in this blog post）

$(function() {
  $('div[tabindex]').first().focus();
});

td {
  outline: 1px solid grey;
}
td label {
  display: inline-block;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <div tabindex="0">
          <label>Cell 1</label>
        </div>
      </td>
      <td>
        <div tabindex="0">
          <label>Cell 2</label>
        </div>
      </td>
      <td>
        <div tabindex="0">
          <label>Cell 3</label>
        </div>
      </td>
      <td>
        <div tabindex="0">
          <label>Cell 4</label>
        </div>
      </td>
      <td>
        <div tabindex="0">
          <label>Cell 5</label>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div tabindex="0">
          <label>Cell 6</label>
        </div>
      </td>
      <td>
        <div tabindex="0">
          <label>Cell 7</label>
        </div>
      </td>
      <td>
        <div tabindex="0">
          <label>Cell 8</label>
        </div>
      </td>
      <td>
        <div tabindex="0">
          <label>Cell 9</label>
        </div>
      </td>
      <td>
        <div tabindex="0">
          <label>Cell 10</label>
        </div>
      </td>
    </tr>
  </tbody>
</table>

错误的元素集中在 Chrome

Wrong element focused in Chrome

javascript

jquery

html

css

onfocus