我有一个包含JavaScript的index.html:
byId("p").value = page;
byId("nav_container").focus();
document.forms["nav_form_main"].submit();
这里无法实现焦点聚焦。
我想让浏览器聚焦在页面上的特定部分(几乎在顶部)。
我尝试在submit()之后设置焦点,但出现了相同的问题。
我有一个包含JavaScript的index.html:
byId("p").value = page;
byId("nav_container").focus();
document.forms["nav_form_main"].submit();
这里无法实现焦点聚焦。
我想让浏览器聚焦在页面上的特定部分(几乎在顶部)。
我尝试在submit()之后设置焦点,但出现了相同的问题。
确保你想要聚焦的元素具有属性 tabindex="-1"
,否则该元素无法获得焦点。
例如:
<div id="myfocusablediv" tabindex="-1"></div>
当你为一个元素设置tabindex=-1时,它允许通过javascript获取焦点。如果你想通过在元素之间按Tab键来获取焦点,则应将tabindex属性设置为0。
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()
方法生效,并立即将其设置回原始值。
在Chrome 76上,似乎不需要使用-1
tabindex
技巧,直接给予焦点就可以正常工作。
可能您打开了开发者工具。我刚刚遇到这种情况,当我关闭开发者工具后,一切正常。
tabindex="0"
才可以聚焦(对我有效):tabindex="-1"
会将该元素从页面的tab键序列中移除(因此无法使用键盘进行聚焦)。
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
window.onload = function WindowLoad(evt) {
byId("nav_container").focus();
}
正如其他人所提到的那样,如果“nav_container”不是输入框,它也不起作用,如果要滚动到该位置,请改用命名锚点。在元素之前添加此类锚点:
<a name="nav_container_anchor" />
document.location = "#nav_container_anchor";
byId()
是document.getElementById()
的快捷函数? - Spudley