为什么这个javascript focus()不起作用？

Question

我有一个index.html,其中有一个巨大的形式.该表单由此javascript提交:

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

焦点部分在这里不起作用......

我希望浏览器专注于页面的特定部分(几乎在顶部).

什么做的提示？

PS:我已经尝试将焦点放在submit()后面,同样的问题.

谢谢

Answer 1

确保要聚焦的元素具有属性 tabindex="-1",否则该元素不可聚焦.

例如

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

当你为一个元素设置tabindex = -1时,它允许它通过javascript获得focus().相反,如果你希望它通过tabing through元素获得焦点,那么你可以将tabindex属性设置为0.

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))

这个小函数只是简单地设置表单字段tabindex,-1以便DOM focus()方法可以生效,并立即将其设置回原始值.

Answer 3

您需要一个属性tabindex="0"才能聚焦（对我有用）：tabindex="-1"从页面选项卡序列中删除元素（例如，它不再可以通过键盘聚焦）。

• -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

Answer 4

也许您打开了开发工具。我刚刚遇到这个问题，当我关闭开发工具时，一切正常。