Javascript 为什么 focus() 不选择我的容器 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4014935/
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
Why doesn't focus() select my container div?
提问by Jaime Garcia
I have an index.html which has JavaScript:
我有一个包含 JavaScript 的 index.html：
byId("p").value = page;
byId("nav_container").focus();
document.forms["nav_form_main"].submit();
The focus part doesn't work here.
焦点部分在这里不起作用。
I want the browser to focus on a specific part of the page (almost at top).
我希望浏览器专注于页面的特定部分（几乎在顶部）。
I have tried putting the focus after the submit(), same issue there.
我试过把焦点放在 submit() 之后，同样的问题。
回答by Jaime Garcia
make sure the element you want to focus has an attribute tabindex="-1", otherwise that element is not focusable.
确保您要聚焦的元素具有属性 tabindex="-1"，否则该元素不可聚焦。
For example
例如
<div id="myfocusablediv" tabindex="-1"></div>
When you set the tabindex=-1 for an element it allows it to get focus() through javascript. If instead you want it to get focus through tabbing through elements, then you would set the tabindex attribute to 0.
当您为元素设置 tabindex=-1 时，它允许它通过 javascript 获取 focus()。相反，如果您希望它通过元素的 Tab 键获得焦点，那么您可以将 tabindex 属性设置为 0。
回答by vsync
Here's what I do when I want to force a certain form element to have focus:
当我想强制某个表单元素获得焦点时，我会这样做：
function setFocusFixed( elm ){
if( !input ) return;
var savedTabIndex = elm.getAttribute('tabindex')
elm.setAttribute('tabindex', '-1')
elm.focus()
elm.setAttribute('tabindex', savedTabIndex)
}
// DEMO:
var buttons = document.querySelectorAll('button'),
input = document.querySelector('input');
buttons[0].addEventListener('click', ()=>input.focus())
buttons[1].addEventListener('click', ()=>setFocusFixed(input))<input placeholder='some input' tabindex='2' />
<button>Set focus on input</button>
<button>Set focus on input - fixed</button>This little function simply sets the form field tabindexto -1so the DOM focus()method could take affect, and immediately sets it back to its original value.
这个小函数只是简单地将表单字段tabindex设置-1为 DOMfocus()方法可以生效，并立即将其设置回其原始值。
Update Aug 2019:
2019 年 8 月更新：
Seems that on Chrome 76giving focus works as it should, without the -1tabindextrick.
似乎在Chrome 76 上给予焦点可以正常工作，没有-1tabindex技巧。
回答by Algo
You need an attribute tabindex="0"to be able to focus (works for me) : tabindex="-1"remove the element from the page tab sequence (it is no longer focusable with keyboard for instance).
您需要一个tabindex="0"能够聚焦的属性（对我有用）：tabindex="-1"从页面选项卡序列中删除元素（例如，它不再可以通过键盘聚焦）。
- -1 is still focusable in some cases but not by keyboard (tab key),
- 0 is focusable in an automatic order
- Any other positive number defines the order to focus elements
- -1 在某些情况下仍然可以聚焦，但不能通过键盘（tab 键）聚焦，
- 0 可按自动顺序聚焦
- 任何其他正数定义聚焦元素的顺序
https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
回答by Shadow Wizard is Ear For You
Once you submit the form, any focus becomes irrelevant. The document changes location to the form's action and the focus is lost anyway.
提交表单后，任何焦点都变得无关紧要。文档将位置更改为表单的操作，无论如何焦点都会丢失。
Looks like you want to set focus afterthe submit, in this case do it in the onload event:
看起来你想在提交后设置焦点，在这种情况下在 onload 事件中进行：
window.onload = function WindowLoad(evt) {
byId("nav_container").focus();
}
As mentioned by others, if "nav_container" is not input box it won't work either and to scroll to that position use named anchor instead.. add such anchor before the element:
正如其他人所提到的，如果“nav_container”不是输入框，它也不会工作，滚动到该位置使用命名锚代替..在元素之前添加这样的锚：
<a name="nav_container_anchor" />
Then have such JS code to scroll to that location:
然后让这样的 JS 代码滚动到那个位置：
document.location = "#nav_container_anchor";
回答by Konovalho
Maybe you have devtools open. I just came across this and when I closed devtools everything worked fine.
也许你打开了开发工具。我刚刚遇到这个问题，当我关闭 devtools 时一切正常。
