Javascript d网站的默认焦点元素 关注某个元素 下一焦点元素的控制

如果您可以控制屏幕上的元素，或者它是可预测的静态元素。一个简单的

document.querySelector（“#id”）.focus（）

将聚焦默认元素

如果不是这样，你需要一些复杂的检测

浏览器将首先查找具有最小正非零编号的元素。 如果存在

#锚点

，则使用它后面的第一个可聚焦元素。 否则，正文中的第一个可聚焦元素

a[href]，按钮，输入，对象，区域[href]

因为您可能不想关注该元素，而是希望它成为下一个焦点。 您可以使用可选的tabIndex hack在不可见元素的前面注入一个不可见元素，然后专注于不可见元素。

---

然后在模糊中消除注入的元素。

在身体开始处创建一个链接，链接

href=“#”

和

style=“display:none；position:absolute；”

。

---

当您想重置焦点时：显示元素，将其聚焦并隐藏回去。

我在页面顶部有一个标题

div

元素。每次新内容加载到页面上时，我希望将焦点移回页眉，因为它位于文档顶部

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

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

---

现在，当我按tab键时，

标记总是首先聚焦。

如何聚焦身体？不确定，但

.focus（）

仅适用于输入字段？显然，浏览器会在刷新页面时聚焦。您使用的是哪种选项卡？独自创立如果是这样的话，他们有文档来激活切换选项卡上的事件。实际上，您的问题是：您希望停止将某个元素集中在

键下

或

选项卡活动

，无论用户做了什么，您都希望保持其他内容的集中。对吧？那不是我要找的。我需要在一些操作上重新设置焦点，比如按键，默认状态-加载页面后的状态。根据我的研究，我知道加载页面后关注的元素是“body”，然后单击Tab后，网站焦点流中的第一个元素就被关注了。我无法使用

$（'body'）.focus（）实现这一点-它不会聚焦正文，也不会重置文档的焦点流。@user3157855实际上您的问题是：您想停止将某个元素聚焦在键下或Tab活动上，您想保持其他内容的焦点，无论用户做了什么。对吗？它不会将焦点流重置为文档的默认值，请参见：移动，使用TAB到Y输入，然后单击ESCAPE按钮触发操作，然后单击TAB-它将移动到Z输入，我希望它也重置焦点流，所以X输入应该是焦点。@user3157855只是好奇，您使用的是哪个浏览器？使用像JSFIDLE这样的东西进行复制是很困难的，因为对我来说，焦点会返回到外部元素，而不是片段中包含的元素。我使用的是Google Chrome。欢迎使用Stack Overflow！请不要在你的帖子下留下链接；这些可能被认为是垃圾邮件。这是有用的信息，但并不能真正回答我的问题。如果将多个元素设置为“tabindex=0”（顺序为tabindex=0元素组中的第一个元素到最后一个元素），该怎么办？我需要通用机制，忘记手动设置顺序或元素。我可以先重置焦点，然后使用函数
.live（）
，在带有tab的keyup/down事件上设置精确的元素，但这只是一种解决方法，并不是我问题的完美答案。它描述了如何手动管理焦点，并为您提供了构建工作解决方案所需的知识。没有什么是完美的，我的朋友，你会得到你所付出的：汉克斯，这是一个很好的解决办法，但仍然是一个解决办法。我还使用了一些其他的解决方法使它真正起作用（
.live（）
函数在
.activeElement.blur（）
之后执行keyup/down事件）。在不刷新页面的情况下，是否真的无法告诉浏览器将焦点流重置为默认值？
$(document).ready(function(){
    setInterval(function(){
     var focusbox = document.getElementById("element_to_focus");
     focusbox.focus();
    });
})

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

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

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

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