Блог

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

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

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

Существовал метод with 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">amp;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==" " ? "amp;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> 

Версия 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')
  }
}) 

В jQuery события нормализуются в соответствии с каким свойством события.

Здесь вы можете найти любое значение ключа, например: значение пробела (32).

Эта функция может вам помочь.

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

        //Your code goes here

    }
});
 

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

keyCode не рекомендуется. Вместо этого вы могли бы использовать key (символ, сгенерированный нажатием клавиши) или code (физическая клавиша на клавиатуре). Использование того или иного может иметь разные результаты в зависимости от раскладки клавиатуры.

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

или

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