为什么focus()函数不能选中我的容器div？

Question

我有一个包含JavaScript的index.html：

byId("p").value = page;
byId("nav_container").focus();
document.forms["nav_form_main"].submit();

这里无法实现焦点聚焦。

我想让浏览器聚焦在页面上的特定部分（几乎在顶部）。

我尝试在submit()之后设置焦点，但出现了相同的问题。

- user188962

---

我猜 byId() 是 document.getElementById() 的快捷函数？ - Spudley

Answer 1

确保你想要聚焦的元素具有属性 tabindex="-1"，否则该元素无法获得焦点。

例如：

<div id="myfocusablediv" tabindex="-1"></div>

当你为一个元素设置tabindex=-1时，它允许通过javascript获取焦点。如果你想通过在元素之间按Tab键来获取焦点，则应将tabindex属性设置为0。

- Jaime Garcia

---

"tabindex"一部分是正确的，但它不必是-1，在特定页面中可以使用任何有意义的值。 - PatomaS

对于我的情况没有任何变化。我也无法通过控制台命令获得焦点，也不知道为什么（尝试了纯JavaScript和jQuery）。 - Andrea_86

在Chrome上尝试通过关闭开发工具来使用focus() https://dev59.com/C3NA5IYBdhLWcg3wF5uO#41474220 - Himanshu Shekhar

Answer 2

当我想强制让某个表单元素获取焦点时，我会执行以下操作：

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>

这个小函数简单地将表单字段tabindex设置为-1，以便DOM的focus()方法生效，并立即将其设置回原始值。

2019年8月更新：

在Chrome 76上，似乎不需要使用-1tabindex技巧，直接给予焦点就可以正常工作。

- vsync

Answer 3

可能您打开了开发者工具。我刚刚遇到这种情况，当我关闭开发者工具后，一切正常。

- Konovalho

---

是的，我同意，我遇到了相同的问题。如果开启了开发者工具，你的DOMelement.focus()可能无法正常工作。 - benchpresser

我在Firefox中也遇到了这个问题。非常奇怪。有人知道为什么或如何在保持devtools打开的同时避免它发生吗？ - Zack Light

Answer 4

你需要添加属性 tabindex="0" 才可以聚焦（对我有效）：tabindex="-1" 会将该元素从页面的tab键序列中移除（因此无法使用键盘进行聚焦）。

• -1 在某些情况下仍然可以被聚焦，但不能通过键盘（如tab键）实现聚焦
• 0 按照自动顺序可聚焦
• 任何其他正整数定义了要聚焦元素的顺序

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

- Algo

Answer 5

提交表单后，任何焦点都变得无关紧要。文档会转到表单的操作位置，焦点也会丢失。

看起来您想在提交后设置焦点，这种情况下请在onload事件中执行：

window.onload = function WindowLoad(evt) {
   byId("nav_container").focus();
}

正如其他人所提到的那样，如果“nav_container”不是输入框，它也不起作用，如果要滚动到该位置，请改用命名锚点。在元素之前添加此类锚点：

<a name="nav_container_anchor" />

然后有这样的JS代码来滚动到该位置：

document.location = "#nav_container_anchor";

- Shadow Wizard Chasing Stars