javascript - 将键盘焦点设置为

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>动态构建元素的页面（例如上面）。这<div>会在主屏幕顶部显示数据。当页面生成 div 时，我想设置焦点。我不能在 body 标记上放置 onLoad 函数，因为我不知道何时会生成 div。

<div>标签不能直接在其上设置焦点。<a>因此，我在以下函数中放置了一个带有 id的空标签：

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

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

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

有人对我如何做到这一点有任何建议吗？

score 99 · Accepted Answer

div如果添加tabindex属性，则可以使焦点成为焦点。

见：http ://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

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

如果给定值“-1”，则元素不能被制表符，但焦点可以通过编程方式赋予元素（使用 element.focus()）。

如果给定值 0，则元素可以通过键盘获得焦点并落入文档的选项卡流中。

大于 0 的值创建优先级，其中 1 是最重要的。

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

你的意思是你想在生成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_vulnerabilities

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

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

score 0 · Accepted Answer

你不能集中一个div。你的意思是关注输入吗？

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

我解决了下一个问题：

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

score 0 · Accepted Answer

您可以使用getElementsByClassName

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

javascript - 将键盘焦点设置为

7 回答 7

Related

Reference