为什么Safari点击后不将`<button>`设置为`document.activeElement`？答案

【问题标题】：Why Safari doesn't set `<button>` as `document.activeElement` after clicking it?为什么Safari点击后不将`<button>`设置为`document.activeElement`？
【发布时间】：2021-05-30 12:49:39
【问题描述】：

这个简单的代码

<button onclick="console.log(document.activeElement)">
  console.log(document.activeElement)
</button>

在 Chrome 和 Firefox 中记录 <button>，但 Safari 出于某种奇怪的原因没有将焦点集中在 <button> 和记录 <body>

Safari 出了什么问题？我的期望是单击按钮应使其具有焦点。

Safari 版本：macOS 11.4 上的 14.1.1（最新）

【问题讨论】：

Safari 版本/平台？ developer.mozilla.org/en-US/docs/Web/API/Document/activeElement 。请检查链接一次。
Safari 版本：14.1.1（最新）

标签： javascript html safari onclick focus

【解决方案1】：

虽然<button> 是一个可聚焦元素，但在 macOS 上的 Safari/Firefox 中单击它后不会获得焦点：

这似乎是故意行为，不会改变。在这里阅读更多：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus

【讨论】：

【解决方案2】：

在 mdn 页面上有关于活动元素的信息如下：

Which elements are focusable varies depending on the platform and the browser's current configuration. For example, on macOS systems, elements that aren't text input elements are not typically focusable by default.

这意味着在 safari 上，您的按钮可能不符合可以成为 .activeElement 的条件。

这个问题更详细地介绍了您的问题：

document.ActiveElement not returning the active element in Safari

【讨论】：

<button> 绝对是可聚焦的。
你读过我链接的问题吗？它表明在 safari 上，按钮不具备可聚焦的条件。 MDN 页面还说，不是“文本输入”元素的元素在 macOS 系统上是不可聚焦的——而按钮则不是。这是另一个问题的链接，显示了如何解决该问题：stackoverflow.com/questions/42758815/…
<button>。是。确实。可聚焦。
再次强调，它适用于许多浏览器和系统。不在 Mac 上的 firefox/Safari 上。上面的链接显示了如何解决这个问题 - 只需检测单击按钮并使用.focus()（如果它可以被聚焦）。这个链接在这里：bugs.webkit.org/show_bug.cgi?id=13724 显示 MacOS 上的按钮无法聚焦 - 这是故意的。我不知道你还需要向你证明什么。