按下空格键后执行JS代码

Question

这是我的 JavaScript 代码：

 var changeIdValue =  function(id, value) {
document.getElementById(id).style.height = value;
};

document.getElementById ("balklongwaarde").addEventListener("click", function(){ changeIdValue("balklongwaarde", "60px")});

document.getElementById ("balklevensverwachting").addEventListener("click", function(){ changeIdValue("balklevensverwachting", "60px")});

document.getElementById ("balkhart").addEventListener("click", function(){ changeIdValue("balkhart", "60px")});

document.getElementById ("balklever").addEventListener("click", function(){ changeIdValue("balklever", "60px")});

document.getElementById("balkhersenen").addEventListener("click", function(){ changeIdValue("balkhersenen", "60px")});

我想在按下 keyup 后执行此代码….

有谁知道如何？

原文由 Melissa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有一种方法 keyCode ，现在已弃用，如评论中所述。因此，我编辑了答案。

目前有几种其他方法可以做到这一点。我还包括一个已弃用的以防万一。

 document.body.onkeyup = function(e) {
  if (e.key == " " ||
      e.code == "Space" ||
      e.keyCode == 32
  ) {
    //your code
  }
}

奖励：我做了一个快速片段来获取任何字符的键码。它非常易于使用：只需在下面的文本框中输入任何字母即可。

专业提示：您还可以使用不同的浏览器运行一个代码片段以备不时之需。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="text" placeholder="enter a char here" id="char-finder"><p class="key"> <pr>key</pr> for <pr class="char">space</pr> is <pr class="tr">&nbsp;</pr></p><p class="code"> <pr>code</pr> for <pr class="char">space</pr> is <pr class="tr">Space</pr></p><p class="keycode"> <pr>keyCode</pr> for <pr class="char">space</pr> is <pr class="tr">32</pr></p><script>document.getElementById('char-finder').onkeyup=function(e){key=e.key==" " ? "&nbsp;" : e.key; code=e.code; kcode=e.keyCode; char=e.key==" " ? "space" : e.key; $(".key .tr").html(key); $(".code .tr").html(code); $(".keycode .tr").html(kcode); $(".char").html(char);}</script><style>body{font-size: 17px;}input{border: 1px solid grey; border-radius: 10px; font-size: 15px; padding: 5px;}pr{font-family: Menlo; padding: 3px; border-radius: 5px; font-size: 15px; display: inline-flex; justify-content: center; background: rgb(230, 230, 230); min-width: 20px;}.key pr:first-child{background: rgb(0, 230, 230);}.keycode pr:first-child{background: rgb(230, 0, 50); color: white;}.code pr:first-child{background: rgb(230, 230, 0);}pr.tr{margin-left: 5px; border: 1px solid black; background:transparent;}</style>

原文由 nicael 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2019 年的版本是：（适用于所有主要浏览器 - Chrome、Firefox、Safari）

规范链接 - https://www.w3.org/TR/uievents/#dom-keyboardevent-code

code 包含一个字符串，用于标识被按下的物理键。该值不受当前键盘布局或修饰符状态的影响，因此特定键将始终返回相同的值。此属性的未初始化值必须是“”（空字符串）。

 // event = keyup or keydown
document.addEventListener('keyup', event => {
  if (event.code === 'Space') {
    console.log('Space pressed')
  }
})

原文由 user670839 发布，翻译遵循 CC BY-SA 4.0 许可协议