如何触发：键盘上的有效伪类'输入'按？ （仅使用CSS） [英] How to trigger the :active pseudoclass on keyboard 'enter' press? (using only CSS)

问题描述

CSS：

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

意图：

1. 键盘用户标签链接，使用：focus 样式为视觉提示

他们点击输入来激活链接; ：有效样式提供了可视按键反馈

They hit enter to activate the link; the :active style gives visual keypress feedback

问题：

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

The :active style triggers properly for a mouse click, but not a keypress. Can I fix this with just CSS?

推荐答案

好问题！

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

Yeah, you can't do this anymore.

很久以前MSIE对待：活跃喜欢：focus 所以有一种方法可以通过超链接实现这一点（这是在千兆互联网速度之前以及当浏览器没有很好地显示正在进行中的加载时，除了愚蠢的挥动旗帜或其他东西）。

A long time ago MSIE treated :active like :focus so there was sort of a way to accomplish this with hyperlinks (this was before gigabit internet speeds and when browsers didn't do a good job of showing load-in-progress except for a dumb waving flag or something).

运行以下代码段以查看行动中的行为：

Run the below Snippet to see the behavior in action:

• 输入类型='按钮'可以用 ENTER 或 SPACE 激活


• 按住 SPACE 按钮将显示：active 样式（除了FireFox;这看起来像FF bug，因为它适用于mousedown）


• 按住 ENTER 按钮会反复触发 onclick 每次键盘发送角色。


• 按住 SPACE 按钮将触发 onclick 仅当 SPACE 键被释放时仍然专注于e按钮。 （例如，您可以通过以下方式模拟鼠标单击：选项卡到按钮，按住空格，然后再次单击选项卡并释放它以取消单击。）


• 可以激活超链接仅限。


• 点击超链接将显示：active 样式，使用 ENTER （或触摸）不会。

• input type='button' can be activated with ENTER or SPACE
• Holding down SPACE on a button will show the :active style (except for FireFox; this looks like FF bug since it works OK for mousedown)
• Holding down ENTER on a button will repeatedly trigger onclick every time your keyboard sends the character.
• Holding down SPACE on a button will trigger onclick only if the SPACE key is released while still focused on the button. (For example, you can simulate mouse click this way: tab to a button, hold down space, then hit tab again and release it to cancel the click.)
• Hyperlinks can be activated with ENTER only.
• Clicking on hyperlinks will show :active style, using ENTER (or touch) will not.

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这样的插件。

So you are stuck using JavaScript or a plugin like Flash / Silverlight for this.

这篇关于如何触发：键盘上的有效伪类'输入'按？ （仅使用CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！