HTML `autofocus` 仅适用于有限类别的元素吗？

问题描述 投票：0回答：1

我没有看到 MDN 中列出任何限制。

但是，尽管将 

autofocus
放在此代码中的第二个列表项上，页面加载时的 
document.activeElement
是 
<body>
:

<ul>
  <li>1</li>
  <li id="two" tabindex="1" autofocus>2</li>
  <li>3</li>
</ul>
<button type="button" id="button1">First button</button>
<button type="button" id="button2" autofocus>Second button</button>

相比之下，将 

autofocus
（仅）放在第二个按钮 (
button2
) 上确实会导致其成为页面加载时的活动元素。

那么，

autofocus
仅适用于某些元素吗？

是页面加载时焦点位于第二个列表元素上的唯一方法

document.getElementById("two").focus();
javascript html autofocus
1个回答
0
投票

问题更有可能是在加载事件触发后执行聚焦步骤。

相关规范位于 https://html.spec.whatwg.org/multipage/interaction.html#flush-autofocus-candidates。

由此我们可以得出，为了让 

autofocus
属性在页面加载时执行某些操作，我们需要：

  • 该文档与最顶层文档同源，即不在跨源 iframe 中，因此很难在 REPL 中显示...
  • 该元素是可聚焦区域，否则将选择最接近的此类可聚焦区域。

如果我们假设您在自己的页面中运行此代码，那么您满足了这两个条件并且它应该可以工作。

现在，如果您确实在 

load
事件中记录了 activeElement，您可能会在下一个 flush autofocus候选者之前，该候选者发生在事件循环的更新渲染步骤期间，因此与加载文档。为了确保在初始刷新后运行，您可以使用 
requestAnimationFrame()
它将对回调进行排队，以便在该步骤之后触发一点。

至于为什么当只有

<button>
有该属性时你看到它起作用，我想这只是一个侥幸。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.