Chrome中的元素錯誤

Question

在我的javascript Web應用程序中，我有一個帶有自定義單元格的表，具有雙擊（輸入）時的讀取模式（簡單標簽）和編輯模式。 當我處於編輯模式時，將焦點設置在包含輸入的div上（以td表示），然后可以使用TAB移至另一個單元格。 當我處於讀取模式時，焦點將一直設置在包含標簽的div上，並且我可以使用TAB和Arrows移至另一個單元格。 這在Explorer中非常有效，但是在Chrome的讀取模式下，焦點是不同的：將焦點設置在表格元素上，然后我不能使用TAB和Arrows移到另一個單元格。時間間隔：

$("#iddiv").focus()

問題僅在Chrome上

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

Answer 1

在<div>上設置tabindex="0"的屬性（ 此博客文章中的技術 ）

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