javascript - 如何触发 :active pseudoclass on keyboard 'enter' press?(仅使用 CSS)

Question

CSS:

a:focus  { opacity: .75 }
a:active { transform: translateY(4px) }

意图:

1. 使用 :focus 样式作为视觉提示，使用键盘用户跳转到链接

2. 他们点击 enter 激活链接； :active 样式提供视觉按键反馈

问题:

:active 样式可以正确触发鼠标点击，但不能触发按键。我可以只用 CSS 解决这个问题吗？

Answer 1

好问题!

是的，你不能再这样做了。

很久以前，MSIE 将 :active 当作 :focus 来处理，所以有一种方法可以通过超链接来实现这一点(这是在千兆互联网速度之前和浏览器的时候除了愚蠢的挥动旗帜或其他东西外，没有很好地显示正在进行的加载。

运行以下代码片段以查看实际行为:

• input type='button' 可以用 ENTER 或 SPACE
激活
• 在按钮上按住 SPACE 将显示 :active 样式(FireFox 除外；这看起来像 FF 错误，因为它适用于 mousedown)
• 每次键盘发送字符时，按住按钮上的 ENTER 将重复触发 onclick。
• 在按钮上按住 SPACE 将触发 onclick 仅当释放 SPACE 键时仍将焦点放在按钮上。 (例如，您可以这样模拟鼠标点击:Tab 到一个按钮，按住空格键，然后再次点击 Tab 键并松开以取消点击。)
• 只能使用 ENTER 激活超链接。
• 点击超链接将显示 :active 样式，使用 ENTER(或触摸)则不会。

document.getElementById('t1').focus(); // set focus for easier demo

:active
{
   color: Red;
}

<input type='text' id='t1' value='Set focus and hit tab'/>
<a href='javascript:;' onclick='console.log("Hyperlink")'>Hyperlink</a>
<input type='button' value='Button' onclick='console.log("Button")'/>

因此，您只能为此使用 JavaScript 或 Flash/Silverlight 等插件。