Question

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

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

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

我希望浏览器专注于页面的特定部分（几乎在顶部）。

有关做什么的提示？

我已经尝试将焦点放在submit（）之后，同样的问题就在那里。

Answer 1

确保您要关注的元素具有属性tabindex="-1"，否则该元素不可聚焦。

例如

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

当你为一个元素设置tabindex = -1时，它允许它通过javascript获得focus（）。如果您希望它通过Tab键选择元素来获得焦点，那么您可以将tabindex属性设置为0。

Answer 2

当我想强制某个表单元素具有焦点时，我在做什么：

/**
 * focuses on a form field element even if it has tabIndex
 * @param  {DOM object} item [description]
 */
function formItemFocus( item ){
    if( !item ){
        console.warn('no focusable item: ', item)
        return;
    }

    var savedTabIndex = item.getAttribute('tabindex');
    item.setAttribute('tabindex', '-1');
    item.focus();
    item.setAttribute('tabindex', savedTabIndex);
}

这个小函数只是将表单字段tabindex设置为-1，因此DOM focus()方法可以生效，并立即将其设置回原始值。

Answer 3

提交表单后，任何焦点都变得无关紧要。该文档将位置更改为表单的操作，无论如何焦点都会丢失。

您希望在提交后设置焦点，在这种情况下，请在onload事件中执行此操作：

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

正如其他人所提到的，如果“nav_container”不是输入框，它也不会工作，而是滚动到那个位置而不是使用命名锚..在元素之前添加这样的锚：

<a name="nav_container_anchor" />

然后有这样的JS代码滚动到那个位置：

document.location = "#nav_container_anchor";

Answer 4

你需要一个属性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 5

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

为什么这个javascript focus（）不起作用？

5 个答案:

当我想强制某个表单元素具有焦点时，我在做什么：