Обработка нажатий стрелок в JavaScript: решение проблемы

Быстрый ответ

Для отслеживания нажатий на клавиши-стрелки в JavaScript следует использовать обработчик событий keydown. Для повышения читабельности кода целесообразно использовать свойство event.key:

document.addEventListener('keydown', (event) => {
    const key = event.key;
    switch (key) {
        case 'ArrowUp':    console.log('Нажата клавиша "Вверх"!'); break;
        case 'ArrowDown':  console.log('Нажата клавиша "Вниз"!'); break;
        case 'ArrowLeft':  console.log('Нажата клавиша "Влево"!'); break;
        case 'ArrowRight': console.log('Нажата клавиша "Вправо"!'); break;
    }
});

Добавьте этот обработчик к объекту document, чтобы перехватывать нажатия клавиш-стрелок на глобальном уровне вашего приложения.

Разъяснение событий клавиатуры

События клавиатуры срабатывают в момент нажатия клавиш. Для определения нажатий на клавиши-стрелки следует использовать события keydown и keyup, так как эти клавиши не генерируют символы и, следовательно, не вызывают keypress. Свойство event.key возвращает имя нажатой клавиши, что упрощает код по сравнению с устаревшими keyCode или charCode.

Устаревшие свойства и совместимость с браузерами

Устаревшие event.keyCode и event.which до сих пор можно встретить в старом коде. Для обеспечения совместимости с различными браузерами можно написать следующим образом:

document.addEventListener('keydown', function(event) {
  var key = event.key || event.keyCode;
  if(key === 'ArrowUp' || key === 38) {
    // Действия при нажатии клавиши "Вверх"
  }
  // ... и дальнейшая обработка других клавиш-стрелок
});

Такой подход обеспечит поддержку браузеров, не поддерживающих event.key.

Визуализация

Помните, что работа с клавишами-стрелками в JavaScript напоминает использование компаса:

// Каждой клавише-стрелке соответствует свое направление
document.addEventListener('keydown', function(event) {
  switch(event.key) {
    case 'ArrowUp':
      // Путешествие на север! (⬆️)
      break;
    case 'ArrowDown':
      // Движение на юг! (⬇️)
      break;
    case 'ArrowLeft':
      // Поворот на запад! (⬅️)
      break;
    case 'ArrowRight':
      // Путешествие на восток! (➡️)
      break;
  }
});

При нажатии на клавишу стрелочку компас указывает новое направление. Например:

До нажатия: [СЕВЕР ⬆️]
После нажатия 'ArrowRight': [ВОСТОК ➡️]

Подробнее об этом расскажет наш спикер на видео

Раскладки клавиатуры и интернационализация

Важно учесть, что коды клавиш могут отличаться в разных раскладках клавиатуры. Для интернационализации используйте event.code, который предоставит информацию о физически нажатой клавише независимо от языка ввода:

document.addEventListener('keydown', function(event) {
  if(event.code === 'ArrowUp') {
    // Ваша логика в ответ на физическое нажатие клавиши вверх
  }
});

Отключение стандартных действий браузера

Стандартное поведение браузера при нажатии на стрелки, например прокрутка страницы, иногда требует отключения:

document.addEventListener('keydown', function(event) {
  if(event.key.includes('Arrow')) {
    event.preventDefault(); // Отменяем прокрутку
    // Здесь ваша собственная логика обработки...
  }
});

Используйте preventDefault(), чтобы отключить стандартное действие и заменить его своим кодом.

Упрощённая обработка с помощью конструкции switch

Для управления несколькими клавишами можно использовать конструкцию switch, что значительно удобнее, чем множественные if-else:

document.addEventListener('keydown', function(event) {
  switch(event.key) {
    case 'ArrowUp':    // Действие для клавиши "Вверх"
    case 'ArrowRight': // Действие для клавиши "Вправо"
    // ... и так далее
  }
});

Такой подход улучшает масштабируемость и удобство поддержки кода.

Полезные материалы

1. Element: keydown event – Web APIs | MDN — руководство по работе с событием keydown в JavaScript.
2. KeyboardEvent: key property – Web APIs | MDN — информация о свойстве key для идентификации клавиш.
3. Key values for keyboard events – Web APIs | MDN — список кодов клавиш для их определения.
4. How To Trigger Button Click on Enter — руководство по привязке нажатия клавиши Enter к событию клика на кнопку.
5. KeyboardEvent Value (keyCodes, metaKey, etc) | CSS-Tricks — сниппеты с кодами клавиш для обеспечения совместимости в различных браузерах.
6. Internationalize your keyboard controls – Mozilla Hacks – the Web developer blog — руководство по обработке клавиатурных команд в контексте интернационализации.
7. Keyboard: keydown and keyup — подробное изучение обработки событий клавиатуры в JavaScript.