问FireFox键盘活动按钮

EN

拥有一个键盘友好的用户界面。它有各种形式的控件，如按钮等。

问题是，当用键盘单击按钮时，该按钮不会获得:active状态。我有一个强大的风格来显示它得到:focus -但活动状态只被触发时，使用鼠标和点击主键。

这使得它对用户非常不友好。看起来这个按钮好像没有被激活。页面已经冻结或类似。一个风险是用户需要多次点击，因为他们希望得到视觉反馈。

从我在MDN上读到的内容来看，这似乎是CSS3规范中的一个特性：

https://developer.mozilla.org/en-US/docs/Web/CSS/:active

由于这是一个基于JavaScript的UI，我尝试在click事件上通过JS来解决这个问题：

添加和删除.activated类。

https://css-tricks.com/restart-css-animation/#article-header-id-0

element.classList.add('activated');
void element.offsetWidth;                // Trigger reflow
element.classList.remove('activated');

没有效果。

我已经尝试添加类，删除元素，在类中插入新的元素，并删除类。没有效果。

使用了dataset-active=1和CSS。没有效果。与添加和删除类的问题相同。

还有一些其他的东西。

最后，我还尝试了监听keydown、keyup等设置状态，如果是回车、空格或鼠标单击等，但这很快就变得非常混乱。

有没有什么很好的技巧可以解决这个问题呢？一个不太复杂的解决方案。

示例代码

​

button:focus {
  outline: 1px solid blue;
}
button:active {
  outline: 4px solid red;
}

<button onclick="counter.value = ++counter.value;">Button</button>
<input id="counter" value="0">

​