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

На события клавиатуры в JavaScript стоит обращать внимание на то, что стрелочные клавиши обрабатываются только с помощью события onkeydown, а не onkeypress. Это связано с тем, что onkeypress предназначен для обработки символов, а клавиши, такие как стрелки, не являются символами.

Вот ключевые коды для стрелочных клавиш:

• Влево (Left Arrow) = 37
• Вверх (Up Arrow) = 38
• Вправо (Right Arrow) = 39
• Вниз (Down Arrow) = 40

Таким образом, если вам нужно обработать нажатие стрелочных клавиш, используйте onkeydown и проверяйте значение event.keyCode или event.key.

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

document.onkeydown = checkKey;

function checkKey(e) {
    e = e || window.event;

    if (e.keyCode == 38) {
        // Код для обработки нажатия клавиши "стрела вверх"
        console.log('Вверх');
    }
    else if (e.keyCode == 40) {
        // Код для обработки нажатия клавиши "стрела вниз"
        console.log('Вниз');
    }
    else if (e.keyCode == 37) {
        // Код для обработки нажатия клавиши "стрела влево"
        console.log('Влево');
    }
    else if (e.keyCode == 39) {
        // Код для обработки нажатия клавиши "стрела вправо"
        console.log('Вправо');
    }
}

В этом коде мы назначаем обработчик события keydown, который будет вызываться при каждом нажатии клавиши. В функции checkKey проверяем, какая клавиша была нажата, и выполняем соответствующее действие с помощью кода клавиши.

Если вам нужно сделать что-то более сложное при нажатии, вы можете заменить console.log на любую другую логику. Также не забывайте, что коды клавиш могут отличаться в зависимости от используемой клавиатуры и браузера, поэтому рекомендуется использовать более современные подходы, например свойство e.key, вместо e.keyCode.

Вот возможная самая краткая формулировка:

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('влево');
            break;
        case 38:
            alert('вверх');
            break;
        case 39:
            alert('вправо');
            break;
        case 40:
            alert('вниз');
            break;
    }
};

Демо (благодаря пользователю Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

Это должно работать во всех браузерах. Оставьте комментарий, если есть браузер, в котором это не работает.

Существуют и другие способы получить код клавиши (например, e.which, e.charCode или window.event вместо e), но они не обязательны. Вы можете протестировать большинство из них на сайте http://www.asquare.net/javascript/tests/KeyCode.html. Обратите внимание, что event.keycode не работает с onkeypress в Firefox, но работает с onkeydown.

Для обработки нестандартных клавиш, таких как стрелочные клавиши, рекомендуется использовать событие keydown, а не keypress.

Пример кода на JavaScript:

function checkKey(e) {
    e = e || window.event; // для кроссбраузерной поддержки
    alert(e.keyCode); // выводим код нажатой клавиши
}

document.onkeydown = checkKey; // устанавливаем обработчик события

Дополнительную информацию о клавишах в JavaScript можно найти в отличной справочной статье, которую я нашел: UnixPapa Key Reference. Этот ресурс намного удобнее, чем многие другие, такие как QuirksMode.

Я считаю, что наиболее актуальный метод будет таким:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp" или "ArrowDown"
  switch (key) { // измените на event.key, чтобы использовать вышеуказанную переменную
    case "ArrowLeft":
      // Нажата клавиша влево
      <выполнить что-то>
      break;
    case "ArrowRight":
      // Нажата клавиша вправо
      <выполнить что-то>
      break;
    case "ArrowUp":
      // Нажата клавиша вверх
      <выполнить что-то>
      break;
    case "ArrowDown":
      // Нажата клавиша вниз
      <выполнить что-то>
      break;
  }
});

Это предполагает, что разработчик хочет, чтобы код работал везде на странице, и клиент должен игнорировать любые другие нажатия клавиш. Удалите строку event.preventDefault();, если нужно, чтобы нажатия клавиш, включая те, которые перехватываются этим обработчиком, также были активны.