Javascript 将键盘焦点设置为 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6754275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set keyboard focus to a <div>
提问by webdad3
I have the following code snippet:
我有以下代码片段：
<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...
I have a page that is building <div>elements dynamically (such as above). This <div>displays data on top of the main screen. When the page generates the divs I would like to set focus. I can not put an onLoad function on the body tag as I don't know when the divs will be generated.
我有一个<div>动态构建元素的页面（如上面）。这<div>会在主屏幕的顶部显示数据。当页面生成 div 时，我想设置焦点。我无法在 body 标签上放置 onLoad 函数，因为我不知道何时会生成 div。
A <div>tag can not have focus set on it directly. So I put an empty <a>tag with an id that I'm calling in the following function:
一个<div>标签不能有焦点设置在其上直接。所以我<a>在下面的函数中放置了一个带有 id的空标签：
function setTableFocus(count){
var flinkText = 'focusLink'+count;
document.getElementById(flinkText).focus();
}
I'm not getting any errors and I know the function is being called when the page is presented (via alerts). However, when I using the arrow keys or enter button the entire page moves (not even the div that is presenting the data).
我没有收到任何错误，并且我知道在显示页面时正在调用该函数（通过警报）。但是，当我使用箭头键或输入按钮时，整个页面都会移动（甚至不是呈现数据的 div）。
When I click on to one of the table elements (using the mouse). After that the keydown event starts working. What I would like this to do is to present the data to the user and automatically be keyboard driven.
当我点击表格元素之一（使用鼠标）。之后，keydown 事件开始工作。我希望这样做是将数据呈现给用户并自动由键盘驱动。
Does anyone have any suggestions how I can accomplish this?
有没有人对我如何做到这一点有任何建议？
回答by roberkules
you can make a divfocusable if you add a tabindexattribute.
div如果添加tabindex属性，则可以使焦点成为焦点。
see: http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex
请参阅：http: //snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex
The tabindex value can allow for some interesting behaviour.
- If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
- If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document.
- Values greater than 0 create a priority level with 1 being the most important.
tabindex 值可以允许一些有趣的行为。
- 如果给定值“-1”，则该元素不能被制表，但可以通过编程方式（使用 element.focus()）将焦点赋予该元素。
- 如果给定值为 0，则该元素可以通过键盘获得焦点并落入文档的 Tab 流中。
- 大于 0 的值创建一个优先级，其中 1 是最重要的。
UPDATE:added a simple demo at http://jsfiddle.net/roberkules/sXj9m/
更新：在http://jsfiddle.net/roberkules/sXj9m/添加了一个简单的演示
回答by Lucent Fox
The function that's dynamically generating the divs will have the context available to know which div to focus on, after the last divoutput a scriptwith a scrollTo() to focus on the div you want. Assign each div an ID, so you'll be able to choose it out of the set.
动态生成 div 的函数将有上下文可用于知道要关注哪个 div，在最后一个div输出带有 scrollTo()的脚本以关注您想要的 div 之后。为每个 div 分配一个 ID，这样您就可以从集合中选择它。
Response.Write "
<script language='text/javascript'>
document.getElementById('div#').scrollIntoView();
</script>
"
回答by Ariel
You can't focus a div. Do you mean focus an input?
你不能聚焦一个 div。你的意思是重点输入？
Anyway, you can include a short script tag to focus something right in the HTML - simply put the script right after the div - or even inside the div.
无论如何，您可以包含一个简短的脚本标记来聚焦 HTML 中的某些内容 - 只需将脚本放在 div 之后 - 甚至在 div 内。
回答by Mrchief
Are you in control of the asp function? If yes, then that'd be the easiest place to set focus. Otherwise, you could listen to DOMNodeInsertedevent (note: browser support may vary) and set focus to div(or its children) based on appropriate conditions.
你在控制asp函数吗？如果是，那么这将是最容易设置焦点的地方。否则，您可以侦听DOMNodeInserted事件（注意：浏览器支持可能会有所不同）并div根据适当的条件将焦点设置为（或其子项）。
回答by Joe
You could use getElementsByClassName
<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName('to-focus')[0].focus()</script>
回答by kapitanluffy
do you mean you want to focus the divs whenever it is generated? try reasearching for these
你的意思是你想在生成 div 时聚焦它吗？尝试重新搜索这些
and
和
and for the keypress..
和按键..
http://api.jquery.com/keypress/
http://api.jquery.com/keypress/
afaik divs and other elements can have focus of some sort like in wikis, like..
afaik div 和其他元素可以像 wikis 一样具有某种焦点，例如..
http://en.wikipedia.org/wiki/JavaScript#Cross-site_vulnerabilities
http://en.wikipedia.org/wiki/JavaScript#Cross-site_vulnerabilities
and it'll scroll automatically there. I am just no sure how.
它会自动滚动到那里。我只是不知道如何。
as for the dynamically generated divs and tables you can use jquery's live() function
至于动态生成的 div 和表，您可以使用 jquery 的 live() 函数
回答by IgniteCoders
I solve that doing the next:
我解决了下一步：
<div tabindex="0" >
<button onclick="element.parentNode.focus();"/>
</div>
