javascript - Wrong element focused in Chrome -
in javascript web application i've table custom cells, read mode (simple label) , edit mode on double-click (input). when i'm in edit mode, focus setted on div contains input (in td) , can use tab move cell. when i'm in read mode, focus setted ever on div contains label , can use tab , arrows move cell. works perfect in explorer, in chrome, in read mode, focus different: setted ever on table element , can't use tab , arrows move cell.. i've tried force focus setting interval:
$("#iddiv").focus()
the problem on chrome
<table> <tbody> <tr> <td> <div class='...'> <label></label> </div> </td> ...... </tr> </tbody> </table>
set attribute of tabindex="0"
on <div>
s (technique found in 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>
Comments
Post a Comment