Chrome中的元素错误

Question

In my javascript web application I've a table with custom cells, with read mode (Simple label) and edit mode on double-click (input). When I'm in edit mode, the focus is setted on the div that contains the input (in td) and then I can use TAB to move to another cell. When I'm in read mode, the focus is setted ever on the div that contains the label and I can use TAB and Arrows to move to another cell. This works perfect in Explorer, but in Chrome, in read mode, the focus is different: is setted ever on table element and then I can't use TAB and Arrows to move to another cell.. I've tried also force focus setting an Interval:

$("#iddiv").focus()

The problem is just on Chrome

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

Answer 1

Set an attribute of tabindex="0" on the <div> s (technique found 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>