为什么在按钮上按 Enter 不会导致：Chrome 中的活动状态？答案

【问题标题】：Why does pressing Enter on a button not cause :active state in Chrome?为什么在按钮上按 Enter 不会导致：Chrome 中的活动状态？
【发布时间】：2020-06-02 11:57:38
【问题描述】：

在当前 Chrome (80) 中检查以下 sn-p：

foo.addEventListener('click', () => {
  console.log('button activated');
})

button:active {
  background-color: yellow;
}

&lt;button type="button" id="foo"&gt;Activate me using Click, Enter, Space&lt;/button&gt;

当按钮被点击（向右或向左）或使用 Space 激活时，Chrome 应用 button:active 样式，但在使用激活时不会> 输入。

Firefox 仅在单击（仅限鼠标左键）按钮时应用 button:active 样式。

有谁知道

这是应该如何工作的，以及
如何让按钮显示button:active，无论哪个使用了哪些激活方式？

我非常喜欢基于 CSS 的解决方案。使用关键侦听器添加/删除类将是一个非常丑陋的解决方案，并且不在此问题的范围内。

编辑

必须有，或者至少应该有一种标准方式，让用户使用 Enter 对他们的操作进行视觉反馈来激活按钮。 此行为是否未在某处指定？如果是，我可以在 Mozilla 错误跟踪器和 Chromium 问题跟踪器上将其作为问题提出。

【问题讨论】：

我想你在寻找:focus 不活跃？
这能回答你的问题吗？ How to trigger the :active pseudoclass on keyboard 'enter' press? (using only CSS) 或 stackoverflow.com/questions/51189109/…
@Awais 不幸的是，并非如此。当用户使用 Enter 激活按钮时，必须有一种标准的方式给用户视觉反馈，不是吗？
@connexo 但在第二个链接stackoverflow.com/questions/51189109/… 你会看到当我输入密码并按下进入按钮更改的用户界面时，这不是你的意思
我 - 如问题所述 - 不是在寻找基于 Javascript 的解决方案。应该有一个解决方案，即使由于某种原因 Javascript 不可用，它也可以工作。

标签： html css pseudo-class

【解决方案1】：

规范似乎对此很清楚：

:active 伪类在用户激活元素时应用。例如，在用户按下鼠标按钮和释放鼠标按钮之间。在具有多个鼠标按钮的系统上，:active 仅适用于主要或主要激活按钮（通常是“左”鼠标按钮）及其任何别名。

https://drafts.csswg.org/selectors-3/#sel-active

所以它确实没有明确地提到使用键盘激活一个元素，但它确实声明了

[...] 当用户激活元素时 [...]

因为当用户发出 Enter 或 Space 时，一个按钮明显被用户激活，Firefox 和 Chrome 似乎都明显违反了这里的规范。

除此之外，Chrome 还会在右键单击按钮时应用:active（规范中明确规定不应如此）。

将在 CSSWG 跟踪器中提出问题，以使规范的这一部分更加明确。这里是：https://github.com/w3c/csswg-drafts/issues/4787

【讨论】：

因为当用户发出 Enter 或 Space 时，一个按钮显然是被用户激活的， --> 如何？我没有找到使用输入或空格激活按钮的简单方法。
@TemaniAfif 当然它需要有焦点，所以你可能已经使用 Tab 键导航到它。