FireFox键盘活动按钮
拥有一个键盘友好的用户界面。它有各种形式的控件，如按钮等。
问题是，当用键盘单击按钮时，该按钮不会获得: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">
回答 1
Stack Overflow用户
发布于 2019-06-20 08:18:21
这样如何:向按钮添加一个包含相关键码的data-attribute。按住该键的同时，将分配一个active类，并触发click()和focus()。当释放该键时，active类将被取消分配。
document.onkeydown = function (evt)
{
let btn = document.querySelector ('[data-key=' + CSS.escape (evt.keyCode) + ']');
if (btn)
{
btn.classList.add ('active');
btn.click();
btn.focus();
}
}
document.onkeyup = function (evt)
{
let btn = document.querySelector ('[data-key=' + CSS.escape (evt.keyCode) + ']');
if (btn)
{
btn.classList.remove ('active');
}
} button:focus {
outline: 1px solid blue;
}
button.active, button:active {
outline: 4px solid red;
}<button data-key="32" onclick="console.log(1);">Button 1 [space]</button>
<button data-key="16" onclick="console.log(2);">Button 2 [shift]</button>
<button data-key="13" onclick="console.log(3);">Button 3 [enter]</button>
或者，你也可以看看accesskey attribute。
https://stackoverflow.com/questions/56674175
复制相似问题