按空格键后执行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")});

我想在按下键盘后执行此代码....

有谁有想法怎么样？

Answer 1

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

这将在您点击空格键后执行.

JSFiddle.

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')
  }
})

Answer 3

在JQuery事件中规范化了哪个事件属性.

您可以在此处找到任何键值,例如:空格键值(32).

这个功能可以帮到你.

$(window).keypress(function(e) {
    if (e.which === 32) {

        //Your code goes here

    }
});

Answer 4

keyCode已弃用。您可以使用key（按键生成的字符）或code（键盘上的物理键）来代替。根据键盘布局的不同，使用其中一种或另一种可能会产生不同的输出。

document.addEventListener('keydown', (e) => {
    if (e.code === "Space") {
        // Do your thing
    }
});

或者

document.addEventListener('keydown', (e) => 
    if (e.key === " ") {
        // Do your thing
    }
});