Question

具有旨在简化键盘操作的UI。在按钮等的按钮中具有各种控件。

问题是，通过键盘单击一个按钮时，该按钮没有处于:active状态。我有很强的风格来显示它得到:focus-但只有当一个人使用鼠标并单击主按钮时，才会触发活动状态。

这使事情非常不友好。好像按钮未激活。页面已冻结或类似现象。一个风险是用户希望看到视觉反馈而多次单击。

根据我在MDN上看到的内容，它看起来像是CSS3规范中的功能：

注意：在具有多按钮鼠标的系统上，CSS3指定：active伪类必须仅应用于主按钮；在惯用右手的老鼠上，这通常是最左侧的按钮。

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

由于这是基于JavaScript的用户界面，因此我尝试通过JS在click事件上解决此问题：

添加并删除.activated类。

此操作不起作用，因为未重新呈现页面。要在不使用setTimeout()的情况下解决此问题，我尝试了以下操作：

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。没有效果。与添加和删除类相同的问题。

还有其他一些事情。

我也尝试过使用setTimeout()，但这有点麻烦。尤其是如果使用Enter键（触发多次点击）。

最后，我还尝试侦听键盘按下，键盘输入等设置状态（如果已输入），空格或鼠标单击等。但这很快变得非常混乱。

我是否为此缺少一个巧妙的窍门？一个不太复杂的解决方案。

示例代码

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">

Answer 1

那又如何：向按钮添加一个包含相关键码的数据属性。按下键时，将分配一个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。

FireFox键盘活动按钮

示例代码

1 个答案: