将键盘焦点设置为

Question

我有以下代码片段：

<div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;">
<a id="focusLink2"></a>
<table id="ptObj_listbox1...

我有一个正在动态构建

元素的页面（如上面）。此

在主屏幕顶部显示数据。当页面生成 div 时，我想设置焦点。我无法在 body 标记上放置 onLoad 函数，因为我不知道何时生成 div。

标签不能直接将焦点设置在其上。因此，我放置了一个空的 标记，其中包含我在以下函数中调用的 id：

function setTableFocus(count){
        var flinkText = 'focusLink'+count;
       document.getElementById(flinkText).focus();
}

我没有收到任何错误，并且我知道在呈现页面时正在调用该函数（通过警报）。但是，当我使用箭头键或 Enter 按钮时，整个页面都会移动（甚至不包括显示数据的 div）。

当我单击其中一个表格元素时（使用鼠标）。之后 keydown 事件开始工作。我希望这样做是将数据呈现给用户并自动由键盘驱动。

有人对我如何实现这一目标有任何建议吗？

Answer 1

如果添加 tabindex 属性，则可以使 div 可聚焦。

请参阅：http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

tabindex 值可以允许一些有趣的行为。

• 如果给定值“-1”，则无法使用 Tab 键定位该元素，但可以获取焦点
  以编程方式赋予元素（使用 element.focus()）。
• 如果给定值为 0，则该元素可以通过键盘获得焦点，并且
  落入文档的选项卡流程中。
• 大于 0 的值会创建一个优先级，其中 1 表示最重要。

更新：在http://jsfiddle.net/rorkules/sXj9m/ 添加了一个简单的演示

Answer 2

动态生成 div 的函数将具有可用于知道要关注哪个 div 的上下文，在最后一个 div 输出一个带有scrollTo() 的 script 后，将焦点集中在你想要的div。为每个 div 分配一个 ID，以便您可以从集合中选择它。

Response.Write "
<script language='text/javascript'>
document.getElementById('div#').scrollIntoView();
</script>
"

Answer 3

我解决了这个问题，执行下一步：

<div tabindex="0" >
    <button onclick="element.parentNode.focus();"/>
</div>

Answer 4

你能控制asp功能吗？如果是，那么这将是最容易集中注意力的地方。否则，您可以侦听 DOMNodeInserted 事件（注意：浏览器支持可能会有所不同）并根据适当的条件将焦点设置为 div （或其子级）。

Answer 5

您可以使用 getElementsByClassName

<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName('to-focus')[0].focus()</script>

Answer 6

你的意思是你想在div生成时聚焦它？
尝试重新搜索这些

http://api.jquery.com/focus/

和

http://api.jquery.com/live/

和按键..

http://api.jquery.com/keypress/

afaik div 和其他元素可以像 wiki 中那样具有某种焦点，例如..

http://en.wikipedia.org/wiki/JavaScript#Cross-site_vulnerability

它会自动滚动到那里。我只是不知道怎么做。

至于动态生成的div和表格，你可以使用jquery的live()函数

Answer 7

你不能聚焦一个div。您的意思是集中输入吗？

无论如何，您可以包含一个简短的脚本标签来将某些内容集中在 HTML 中 - 只需将脚本放在 div 后面 - 甚至放在 div 内部。