这里是新手。
我有一个类似的代码:
...
<style>
.button:active {
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
<script>
document.onkeypress = function(e) {
// 83 is the number code for the letter "S" and 115 the for the letter "s"
if (e.which === 83 || e.which === 115) {
document.getElementById('start').click();
}
...
</script>
<body>
<input type="button" id="start" class="button" value="Start (S)" onclick="start();">
</body>
如果我点击上面的按钮，一切正常，但是当我按下键“S”(键码:115)时，函数“start()”被调用，但是事件按钮的 CSS 没有启动(那个是，按钮的动画不会发生)。
问题:如何让 button:active 动画在我按下“S”时启动，使其看起来就像在我按下键盘上的“S”键时单击 HTML 按钮一样？
请不要在答案中使用 JQuery，只需使用纯 JavaScript，因为我没有使用 JQuery 库。
谢谢!
最佳答案
您需要为按键分配一个 EventListener。另外，您不需要单击按钮，我认为您可以直接调用 start() 函数，对吗？
document.addEventListener('keydown', function(e) {
if(e.keyCode == 115) start();
});
这对你有用!
编辑:正如您在下面的示例中看到的，动画只会在按住按钮时发生。 JavaScript click() 调用只是很短时间的按住按钮，因此您不会看到任何动画。
var el = document.getElementById("btn");#btn {
width: 20px;
transition: all 2s ease;
}
#btn:active {
width: 80px;
}<input type="button" id="btn">要获得所需的效果，您可以为类上的元素设置动画。例如，使用 clicked 类设置它的宽度(或任何其他属性)并使用 JS 切换类。
关于javascript - 在按键上使 javaScript(不是 JQuery!) "activate"成为 CSS 按钮 :active style，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40208472/