如何在不直接向元素添加焦点的情况下检测和控制焦点在页面上的“位置”?

时间:2017-10-12 21:00:27

标签: javascript html focus accessibility tabindex

首次加载网页时,按“Tab”,document.activeElement将成为<body>标记,页面上的任何内容都不会有焦点(即$(':focus')将为空)

按“标签”会将焦点添加到页面上的第一个可聚焦元素(将变为document.activeElement$(':focus')

如果您点击页面下方某处不可聚焦的元素(例如<p>标记中的文字),document.activeElement将再次成为<body>标记,页面上的任何内容都不会有:focus,但按“Tab”会在点击内容后将焦点添加到第一个可聚焦元素。

我的问题是:有没有办法在使用JS之间区分:

  • 初始页面加载时的状态(没有元素有:focus但按“Tab”会将焦点添加到第一个可聚焦元素)和
  • 点击页面下方的一些不可聚焦元素后的状态?

对于上下文:我正在构建一个网站,您可以在其中单击哈希链接以导航到页面的不同部分,并希望动画滚动到不同的部分,而不是让它们立即跳转。我有一切工作,除了焦点(现在点击其中一个链接后按“Tab”只是转到下一个链接而不是我滚动到的元素中/之后的第一个可聚焦元素)。我知道我可以使用tabindex="-1"element.focus()强制关注我滚动到的页面部分,但如果可能的话,我宁愿复制本机浏览器行为。

0 个答案:

没有答案