javascript 移动到网页的第一个“默认”焦点

cnh2zyt3 于 12个月前发布在 Java

关注(0)|答案(9)|浏览(120)

假设你有一个网站，当你刷新它的时候，如果你检查哪个元素有焦点，使用下面的代码：

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

字符串
你会看到元素的标签是'BODY'元素。你如何使用JavaScript将焦点恢复到同一个元素，因为像$('body').focus();这样的东西不起作用。

**编辑：**它还应该重置文档的“焦点”流。因此，单击Tab后，它将聚焦相同的元素，就像您将刷新页面然后单击Tab一样。
**编辑2：**我需要重置一些动作的焦点，比如keyDown，到默认状态-加载页面后的状态。从我的研究中，我知道加载页面后聚焦的元素是'body'，然后点击Tab后，网站焦点流中的第一个元素被聚焦。我不能使用$（'body'）.focus（）; -它不会聚焦body，也不会重置文档的当前焦点流。
**编辑3：**到目前为止，我们已经设法使用以下代码将焦点重置为网站的body元素：document.activeElement.blur();所以我上面的脚本会说body是焦点，但它不会重置当前焦点的实际流程，当你使用键盘导航网站时（TAB按钮）。可以使用变通方法并选择所需的指定元素，但这不是问题的答案。什么是通用机制来重置网站的键盘导航流到默认状态，而不刷新页面？
编辑4：https://jsfiddle.net/4qjb5asw/5/

JavaScript

来源：https://stackoverflow.com/questions/51518855/move-to-first-default-focus-of-web-page

9条答案

按热度按时间

mec1mxoz1#

您可以通过执行document.activeElement.blur();来清除活动元素的焦点，而不是专门聚焦<body>。这应该会将焦点恢复到<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>

赞(0）回复(0）举报 12个月前

inn6fuwd2#

如果你想细粒度控制焦点，可以考虑使用tabIndex [1]属性。基本上，它允许你通过为每个可以拥有焦点的元素分配数字来指定Tab键顺序。一个额外的好处是，tabIndex允许你指定元素，这些元素可能不是默认的-正是你需要的。
Tab键顺序和焦点对于可访问性非常重要，因为用户没有定点设备。因此，此标记旨在给予您精确的焦点控制。它使您能够指定页面上所有可聚焦的元素。在您的情况下，它为所有可聚焦的元素提供了一个句柄，使您能够在需要时在需要的位置专门设置焦点。
不确定你使用的是哪个框架，但jQuery是跨浏览器兼容性的候选者。
jQuery .focus()页面：
在最近的浏览器版本中，可以通过显式设置元素的tabindex属性来扩展事件以包括所有元素类型。[2]
可能是基于tabindex的.focus();类似这样的东西：

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

字符串

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
https://api.jquery.com/focus/的
https://forum.jquery.com/topic/how-to-focus-on-next-object-according-to-tab-index-not-object-order-on-page的
如果使用这个功能，一定要检查你的标签顺序。通过你的页面标签，并确保你已经得到了所有的焦点元素正确排序。

赞(0）回复(0）举报 12个月前

fcg9iug33#

听起来你只是想在某些事件上重置文档的默认焦点，比如在特定的键上的keydown，这样用户就可以在触发事件后开始从顶部开始在文档中切换。
您可以使用以下命令重置文档的默认焦点：
document.activeElement.blur()个
您可以添加任何想要触发函数的事件侦听器。对于escape键上的keydown事件，它将是：

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

字符串
重要提示：请注意，如果您在嵌入式工具（如SO snippet或jsfiddle）中进行测试，则需要添加更多的代码来将焦点设置为该工具的元素 Package 器，以模拟显示区域表示整个文档时会发生的情况（否则，您将重置焦点到主文档，在SO的情况下，您将开始在菜单，问题，答案，评论，和页面上的其他元素）。
用于测试的示例代码片段，将焦点重置为代码片段中的 Package 器元素，以便从代码片段的开头（而不是从此SO页面的文档开头）重新开始Tab键操作：

/*
 * 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>

的数据

赞(0）回复(0）举报 12个月前

llmtgqce4#

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

<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>标记总是首先聚焦。

赞(0）回复(0）举报 12个月前

4szc88ey5#

你的问题可分为三部分

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

如果你可以控制屏幕上的元素，或者它是可预测的静态元素，一个简单的document.querySelector("#id").focus()将聚焦默认元素。
如果不是这样，你需要一些检测，这可能是复杂的。
浏览器将首先找到具有最小的非零正数[tabIndex]的元素。然后，如果#anchor存在，则使用它之后的第一个可聚焦元素。否则，主体中的第一个可聚焦元素a[href],button,input,object,area[href]。
因为你可能不想关注元素，但希望它成为下一个焦点。你可以在它之前注入一个不可见的元素，使用可选的tabIndex hack，并关注你的不可见元素。

赞(0）回复(0）举报 12个月前

2jcobegt6#

这将使您指定的元素集中

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

字符串

赞(0）回复(0）举报 12个月前

qybjjes17#

带有tabindex属性的“snippet” Package 器div在这里只是为了帮助我们假装snippet结果代表整个文档（在常规实现中不需要）。tab索引有助于确保 Package 器div可聚焦。

赞(0）回复(0）举报 12个月前

n1bvdmb68#

在正文的开头创建一个href="#"和style="display: none; position: absolute;"的链接。当你想重置焦点时：显示元素，聚焦它，然后隐藏它。

赞(0）回复(0）举报 12个月前

wbrvyc0a9#

恢复焦点的初始键盘Tab键顺序与我遇到的问题相同。正如其他人所发布的那样，document.activeElement.blur()会将主体设置为当前焦点。不幸的是，在随后的Tab键切换中，浏览器总是会跳回来并记住blur（）之前的最后一个选项。
最终对我起作用的是类似于Dan的答案（https://stackoverflow.com/a/61566372/13175620）。您创建一个临时的锚标记来聚焦，将其添加为<body>的第一个子元素，将焦点设置为该元素，然后删除该标记。这在Chrome和Firefox中都有效

window.addEventListener('keydown', function (e) {
  // Used to reset tab-index flow
  if (e.key === 'Escape') {
    var a = document.createElement('a')
    a.href = '#'
    a.style.position = 'absolute'
    a.style.width = '1px'
    a.style.height = '1px'
    a.style.overflow = 'hidden'
    document.body.prepend(a)
    a.focus()
    document.body.removeChild(a)
  }
})

字符串

赞(0）回复(0）举报 12个月前

我来回答

javascript 移动到网页的第一个“默认”焦点

9条答案

相关问题

热门标签

最新问答