Блог

Главная - Вопросы по программированию - Как проверить, удерживается ли нажатой клавиша (на клавиатуре)?

Как проверить, удерживается ли нажатой клавиша (на клавиатуре)?

#javascript #html #css

#javascript #HTML #css

Вопрос:

В основном заголовок. Мне нужна функция, которая работает вроде кнопки приседания — символ приседает только тогда, когда удерживается клавиша со стрелкой вниз, а не нажата только один раз. Как мне заставить это работать? Вот что я пробовал, но это не работает. Заранее спасибо!!!!!

 document.onkeydown = function (event) {
    let key = event.key;
    while (key ==  "ArrowDown") {
        character.style.width = 50   "px";
        character.style.height = 30   "px";
        character.style.top = 115   "px";
    }
}

Комментарии:

1. вы можете обработать onKeyDown и OnKeyUp, если события keyup нет, тогда оно удерживается нажатой.

2. Время между событиями keydown и keyup представляет собой продолжительность удержания клавиши нажатой. Когда вы нажмете клавишу, перейдите в режим приседания и прослушайте нажатие клавиши, чтобы прекратить приседание.

Ответ №1:

keydown событие непрерывно запускается, когда вы удерживаете нажатой любую клавишу, и когда вы отпускаете клавишу, keyup событие запускается.

Чтобы достичь того, что вы пытаетесь сделать, добавьте стили к символу при запуске keydown события и при keyup событии удалите эти стили из символа.

Следующий фрагмент кода показывает пример:

 const character = document.querySelector('.character');

document.body.addEventListener('keydown', (event) => {
  character.classList.add('crouch');
});

document.body.addEventListener('keyup', (event) => {
  character.classList.remove('crouch');
});  
 div {
  width: 100px;
  height: 100px;
  background: yellow;
  position: relative;
}

.crouch {
  height: 50px;
  top: 50px;
}  
 <div class="character">Press any key</div>

Ответ №2:

Я думаю, что вы могли бы просто поместить это в начало блока кода в прослушивателе событий:

 if (!e.repeat) return