Блог

Главная - Вопросы по программированию - Ввод одним ключом HTML/CSS

Ввод одним ключом HTML/CSS

#javascript #html #css #keyboard-input

Вопрос:

Я разрабатываю игру «Змея», чтобы попрактиковаться в своих навыках HTML/JS/CSS. Я хочу иметь экран меню, который позволяет пользователю выбирать клавиши клавиатуры, управляющие движениями влево/вправо/вверх/вниз. Я знаю, что мог бы использовать тег ввода и ограничить максимальную длину 1, но я хочу включить такие клавиши, как пробел и клавиша ввода. Есть ли простой способ разрешить пользователю просто нажимать и нажимать клавиши на клавиатуре, а также сохранять и отображать их нажатие каким-либо образом с помощью HTML/JS/CSS?

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

1. Подождите, вы говорите, что хотите попрактиковаться в навыках JavaScript, но затем спрашиваете, можно ли это сделать с помощью HTML и CSS? Можете ли вы не использовать JavaScript? (Я также замечаю, что вопрос не помечен JavaScript…)

2. @OOPSStudio Хорошие моменты.. Я внес коррективы в свой пост на основе вашего комментария.

3. Ах, круто, спасибо! Я не пытался что-то объяснить, мне действительно было искренне любопытно. Рад, что теперь все прояснилось.

Ответ №1:

Вы можете использовать keydown и keyup .

 document.addEventListener('keydown', function(event) {
   console.log(event);
   if (event.key == 'ArrowDown') {
      event.preventDefault(); // prevent it from doing default behavior, like downarrow moving page downward
   }
});

Вы должны запустить event.preventDefault() , если нажатая клавиша-это клавиша, используемая вашей игрой, таким образом, она не влияет на поведение страницы (например, прокрутка страницы вниз).

Метки: