Question

新手在这里。

我有类似的代码：

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

如果我点击上面的按钮一切正常，但当我按下键时，＃34; S＆＃34; （键码：115）功能＆＃34; start（）＆＃34;被调用，但活动按钮的CSS不会启动（也就是说，按钮的动画不会发生）。

问题：如何制作按钮：当我按下＆＃34; S＆＃34;时，启动活动动画，使其看起来就像我在按下＆＃34; S＆时点击HTML按钮一样＃34;键盘上的键？

请不要在答案中使用JQuery，只是简单的JavaScript，因为我没有使用JQuery库。

谢谢！

Answer 1

您需要为按键分配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切换类。

Answer 2

更新：来自@flen的优点使用IE中支持的Element.classList.toggle();女孩＆gt; = 10

document.onkeypress = function(e) {
  if ((e.which || e.keyCode) == 115) { //this is the number code for the letter "S"
document.getElementById('start').click();
document.getElementById('start').classList.add("button-active");
  }
};

document.onkeyup = function(e) {
document.getElementById('start').classList.toggle("button-active");
}

function start() {
  console.log("start")
}

<style>
  /*set button-active */
  .button:active,
  .button-active {
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
</style>

<input type="button" id="start" class="button" value="Start (S)" onclick="start();" />

使用Element.className

为所有浏览器执行此任务的另一种方法

document.onkeypress = function(e) {
  if ((e.which || e.keyCode) == 115) { //this is the number code for the letter "S"
    document.getElementById('start').click();
    if (document.getElementById('start').className.indexOf("button-active") == -1) document.getElementById('start').className += ' button-active';
  }
};

document.onkeyup = function(e) {
  document.getElementById('start').className = document.getElementById('start').className.replace(/button\-active/g, "");

}

function start() {
  console.log("start")
}

<style>
  /*set button-active */
  .button:active,
  .button-active {
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
</style>

<input type="button" id="start" class="button" value="Start (S)" onclick="start();" />

制作javaScript（不是JQuery！）＆＃34;激活＆＃34; on keypress一个CSS按钮：活动样式

2 个答案: