Выполнить код JS после нажатия пробела

это мой код в 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")});

Я хочу выполнить этот код после нажатия на клавишу....

Кто-нибудь знает, как?

Ответ 1

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

Это будет выполнено после того, как вы нажмете пробел.

JSFiddle.

Ответ 2

В JQuery события нормализуются под , который свойство события.

Здесь вы можете найти любое значение ключа , например: значение пробела (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);
}

Ответ 4

Это будет версия 2019 года: (работает во всех основных браузерах - Chrome, Firefox, Safari)

Ссылка на спецификацию - https://www.w3.org/TR/uievents/#dom-keyboardevent-code

Код содержит строку, которая идентифицирует физическую нажатую клавишу. На значение не влияет текущая раскладка клавиатуры или состояние модификатора, поэтому конкретная клавиша всегда будет возвращать одно и то же значение. Неинициализированное значение этого атрибута ДОЛЖНО быть "" (пустая строка).

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