错误的元素集中在Chrome
Wrong element focused in Chrome
在我的javascript web应用程序中,我有一个带有自定义单元格的表,具有读取模式(简单标签)和双击(输入)的编辑模式。当我处于编辑模式时,焦点设置在包含输入(在td中)的div上,然后我可以使用TAB移动到另一个单元格。当我处于读取模式时,焦点被设置在包含标签的div上,我可以使用TAB和箭头移动到另一个单元格。这在资源管理器中工作完美,但在Chrome中,在读取模式下,重点是不同的:是设置在表元素上,然后我不能使用TAB和箭头移动到另一个单元格。我也试过强制对焦设置间隔:
$("#iddiv").focus()
问题只是在Chrome上
<table>
<tbody>
<tr>
<td>
<div class='...'>
<label></label>
</div>
</td>
......
</tr>
</tbody>
</table>
在<div>
s上设置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>
相关文章:
- Chrome WebKitGetUserMedia
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- 在chrome.tabs.onCreated之后加载HTML页面
- 在jstree中,如何将指定的节点集中到大型树上
- chrome扩展中的navigator.geolocation.getCurrentPosition
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- chrome扩展更改主机/域警告
- Chrome开发工具(如何知道我在调用哪个javascript对象)
- 如何在chrome扩展中重定向到html页面
- Chrome扩展没有't在重新加载之前考虑期权价值
- Google/html5语音识别JavaScript SDK Chrome网络工具包SpeechRecognition
- 激活chrome上的chrome.notifications对象
- 如何通过自己获得Chrome扩展的用户反馈/错误报告
- JS可以在Chrome中工作,但不能在Firefox中工作
- Chrome加载旧版本的Javascript文件
- 试图阻止Chrome通过扩展关闭
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- 访问集中的元素从背景页扩展为谷歌Chrome
- 错误的元素集中在Chrome