按空格键后执行JS代码答案

【问题标题】：Execute JS code after pressing the spacebar按空格键后执行JS代码
【发布时间】：2014-08-14 16:46:53
【问题描述】：

这是我的 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 后执行这段代码......

有人知道怎么做吗？

【问题讨论】：

在键盘上为哪个？这些元素中的任何一个？
这可能很有用，对我来说。 dmauro.github.io/Keypress

标签： javascript keyup

【解决方案1】：

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

这将在您按空格键后执行。

JSFiddle.

【讨论】：

显然是keyCodeis deprecated。最好使用：if (e.keyCode === 32 || e.key === ' ')
在 iOS 中没问题，在 android 移动网络浏览器中不起作用
@z0r 似乎 IE 无法识别e.key === ' ' 但e.key === 'Spacebar'

【解决方案2】：

在 JQuery 中，事件在 which 事件属性下被规范化。

您可以在此处找到任何键值例如：空格键值（32）。

这个功能可以帮到你。

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

        //Your code goes here

    }
});

【讨论】：

很好的答案！谢谢

【解决方案3】：

document.activeElement 是具有焦点的任何元素。您经常会在焦点元素上找到空格键和输入触发点击。

document.body.onkeyup = function(e){
    if(e.keyCode == 32 || e.keyCode == 13){
        //spacebar or enter clicks focused element
        try {
            doc.activeElement.click();
        }
        catch (e) {
            console.log(e);
        }            
    }
};

那么 CSS 可能是：

.focusable-thing:hover {
    cursor: pointer;
}
.focusable-thing:focus {
    -webkit-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
    box-shadow: 0px 2px 8px 2px rgba(0,0,0,0.4);
}

【讨论】：

谁能告诉我onkeyup 上的document.body.onkeyup 是什么。它是什么意思以及为什么使用它

【解决方案4】：

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

【讨论】：

【解决方案5】：

keyCode is deprecated。您可以改用key（按键生成的字符）或code（键盘上的物理键）。根据键盘布局，使用一种或另一种可能会产生不同的输出。

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

或

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

【讨论】：

你说得对，我打错了，我编辑了答案:)