Question

假设您拥有网站，并且在刷新它时，如果使用以下代码检查哪个元素具有焦点，

setInterval(function () {
    console.log('ID: ', $(document.activeElement).attr('id') + ' Tag: ' + $(document.activeElement).prop('tagName')
        + ' C: ' + $(document.activeElement).attr('class'));
}, 2000);

您将看到element的标签是'BODY'元素。您如何使用JavaScript将焦点恢复到同一元素，因为$('body').focus();之类的东西不起作用。

编辑：它还应该重置文档的“焦点”流程。因此，在单击TAB之后，它将像重新刷新页面然后单击TAB一样聚焦相同的元素。

编辑2：我需要将焦点重设到诸如keyDown之类的某些操作上，恢复为默认状态-加载页面后的状态。从我的研究中，我知道加载页面之后关注的元素是“ body”，然后单击“ Tab”后，网站关注流中的第一个元素就是关注的。我不能使用$（'body'）。focus（）; -它不会聚焦正文，也不会重置当前文档焦点流。

编辑3：到目前为止，我们已经设法使用以下代码将焦点重新设置为网站的body元素：document.activeElement.blur();，因此我上面的脚本会说{{1 }}具有焦点，但是当您使用键盘导航网站（TAB按钮）时，它不会重置当前焦点的实际流向。可能有解决方法并选择所需的指定元素，但这不能回答问题。在不刷新页面的情况下将网站的键盘导航流程重置为默认状态的通用机制是什么？

编辑4： https://jsfiddle.net/4qjb5asw/5/

Answer 1

您可以通过执行<body>来清除活动元素的焦点，而不是专门关注document.activeElement.blur();，这应该将焦点恢复到<body>元素并重置焦点流程。

在下面的代码段中单击以查看当前的document.activeElement是什么。

$("#reset").on("click", function() {
  document.activeElement.blur();
  logActiveElement();
});

$("form").children().on("focus", logActiveElement);

function logActiveElement() {
    console.log("The active element is now: " + $(document.activeElement).prop('tagName'));
}

.blur {
  padding: 5px;
  border: 2px solid blue;
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" />
  <textarea></textarea>
  <button type="button">Test Button</button>
</form>

<div class="blur">
  <button id="reset">RESET ACTIVE ELEMENT</button>
</div>

Answer 2

如果要精确控制焦点，请考虑使用tabIndex [1]属性。基本上，它允许您通过为可以具有焦点的每个元素分配数字来指定制表符顺序。另一个好处是tabIndex使您可以指定默认情况下可能不是的元素，正是您所需要的。

选项卡的顺序和焦点对于可访问性极为重要，因为用户没有指针设备。因此，此标签旨在为您提供精确的焦点控制。它使您可以在页面上指定所有可聚焦的元素。就您而言，它提供了所有可聚焦元素的句柄，使您可以在需要时根据需要专门设置焦点。

不确定您使用的是哪个框架，但是jQuery是跨浏览器兼容性的候选者。

在jQuery .focus()页上：

在最新的浏览器版本中，该事件可以扩展为包括所有通过显式设置元素的tabindex属性来设置元素类型。 [2]

也许.focus()基于tabindex；像这样：

$('input[tabindex='+ntabindex+']').focus();  // [3]

如果使用此功能，请务必检查您的跳位顺序。分页浏览并确保所有可聚焦元素的顺序正确。

Answer 3

您的问题可以分为三部分

找到网站的默认焦点元素。
关注元素
控制下一个焦点元素

如果您可以控制屏幕上的元素，或者它是可预测的静态元素。一个简单的document.querySelector("#id").focus()将聚焦默认元素。

如果不是这种情况，则需要进行一些可能很复杂的检测。

浏览器将首先找到具有最小非零[tabIndex]的正数的元素。比起#anchor，它使用了第一个可聚焦元素。否则，首先要从身体开始聚焦元素a[href],button,input,object,area[href]。

因为您可能不想集中于该元素，但希望其下一个成为焦点。您可以在其前面插入一个不可见元素，并使用一个可选的tabIndex hack，然后将焦点集中在您的不可见元素上。并在模糊时消除注入的元素。

Answer 4

我在页面顶部有一个标题 div 元素。每次将新内容加载到页面上时，我想将焦点移回页眉，因为它位于文档顶部，

<div tabindex="-1" role="header">
  <a href="#content">I always want this to be tabbed first</a>
</div>

重要的一点是将 tabindex 设置为 -1，这会将它从浏览器的默认焦点流中删除，然后允许我使用 javascript 以编程方式设置焦点。

document.querySelector('div[role="header"]').focus();

每次显示新内容时都会运行此代码段，这意味着使用键盘的人可以在单页应用程序中为每个页面提供一致的起点。

现在，当我按下 Tab 键时，<a> 标签总是首先聚焦。

Answer 5

这将使您指定的元素保持重点

$(document).ready(function(){
    setInterval(function(){
     var focusbox = document.getElementById("element_to_focus");
     focusbox.focus();
    });
})

Answer 6

听起来像您只是希望针对某些事件（例如，特定键上的keydown）重设文档的默认焦点，以便用户可以在触发事件后从顶部开始逐步浏览文档。

您可以使用以下方法重置文档的默认焦点：

document.activeElement.blur()

您可以添加要触发该函数的任何事件侦听器。对于转义键上的keydown事件，应为：

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    document.activeElement.blur()
  }
});

重要提示：请注意，如果要在SO代码段或jsfiddle之类的嵌入式工具中进行测试，则需要添加更多代码以将焦点设置到该工具的元素包装上，以模拟如果显示区域代表整个文档（否则，您将把焦点重新设置到主文档上，对于SO，您将在进入摘录之前开始在页面上的菜单，问题，答案，注释和其他元素之间进行切换）。

用于测试的示例代码片段，将焦点重新设置到该代码片段中的包装器元素，以便从该代码片段的开头（而不是从该SO页面的文档的开头）重新开始制表符：

/*
 * All code below referencing the "snippet" variable is only
 * here to help us pretend that the snippet result
 * represents the entire document (not needed in a
 * regular implementation).
 */
const snippet = document.querySelector('#snippet');
snippet.focus();

const btn = document.querySelector('#button1');
const resetFocus = () => {
  document.activeElement.blur();
  snippet.focus();
}

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    resetFocus();
  }
});

btn.addEventListener('click', (event) => {
  resetFocus();
});

<!--
  The "snippet" wrapper div with tabindex attribute
  is only here to help us pretend that the snippet result
  represents the entire document (not needed in a regular
  implementation). The tabindex helps ensure that the
  wrapper div is focusable.
-->

<div id="snippet" tabindex="0">
  <div>Tab to or select input to focus. To reset focus:
  </div>
  <ul>
    <li>Press escape key.</li>
    <li>Or, click "Reset" button.</li>
  </ul>
  <div>
    <input id="input1" type="text" name="input1" />
  </div>
  <div>
    <input id="input2" type="text" name="input2" />
  </div>
  <button id="button1">Reset</button>
</div>

Answer 7

带有tabindex属性的“代码段”包装div 此处只是为了帮助我们假装摘录结果代表整个文档（常规实现中不需要）。标签索引有助于确保包装div可以集中显示。

Answer 8

在身体的开头用href="#"和style="display: none; position: absolute;"创建一个链接。当您要重置焦点时：显示元素，将其聚焦并向后隐藏。

移至网页的第一个“默认”焦点

8 个答案: