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

Question

Как определить, когда нажата одна из клавиш со стрелками?Я использовал это, чтобы выяснить:

function checkKey(e) {
    var event = window.event ? window.event : e;
    console.log(event.keyCode)
}

Хотя он работал для любой другой клавиши, он не работал для клавиш со стрелками (возможно, потому что браузер должен прокручивать эти клавиши по умолчанию).

Answer 1

клавиши со стрелками запускаются только по onkeydown, а не onkeypress

. Коды клавиш:

• влево = 37
• вверх = 38
• вправо = 39
• вниз = 40

Answer 2

Функция вызова вверх и вниз по клавише. Для каждой клавиши есть разные коды.

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}

Answer 3

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

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 38:
            alert('up');
            break;
        case 39:
            alert('right');
            break;
        case 40:
            alert('down');
            break;
    }
};

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

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

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

Answer 4

event.key === "ArrowRight" ...

Более новый и намного чище: используйте event.key. Нет больше кодов произвольных чисел! Если вы путешествуете или знаете, что все ваши пользователи используют современные браузеры, используйте это!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
});

Подробная обработка:

switch (event.key) {
    case "ArrowLeft":
        // Left pressed
        break;
    case "ArrowRight":
        // Right pressed
        break;
    case "ArrowUp":
        // Up pressed
        break;
    case "ArrowDown":
        // Down pressed
        break;
}

Вы можете легко расширить это, чтобы проверить "w", "a", "s", "d" или любую другую клавишу

Документы Mozilla

Поддерживаемые браузеры

P.S. event.code то же самое для стрелок

Answer 5

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

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

document.onkeydown = checkKey;

Лучшая ссылка на событие с ключом JavaScript, которую я нашел (например, выбив штаны из режима причуд)) здесь: http://unixpapa.com/js/key.html

Answer 6

Современный ответ, поскольку keyCode устарел в пользу key :

document.onkeydown = function (e) {
    switch (e.key) {
        case 'ArrowUp':
            // up arrow
            break;
        case 'ArrowDown':
            // down arrow
            break;
        case 'ArrowLeft':
            // left arrow
            break;
        case 'ArrowRight':
            // right arrow
    }
};

Answer 7

function checkArrowKeys(e){
    var arrs= ['left', 'up', 'right', 'down'], 
    key= window.event? event.keyCode: e.keyCode;
    if(key && key>36 && key<41) alert(arrs[key-37]);
}
document.onkeydown= checkArrowKeys;

Answer 8

Вот пример реализации:

var targetElement = $0 || document.body;

function getArrowKeyDirection (keyCode) {
  return {
    37: 'left',
    39: 'right',
    38: 'up',
    40: 'down'
  }[keyCode];
}

function isArrowKey (keyCode) {
  return !!getArrowKeyDirection(keyCode);
}

targetElement.addEventListener('keydown', function (event) {
  var direction,
      keyCode = event.keyCode;

  if (isArrowKey(keyCode)) {
    direction = getArrowKeyDirection(keyCode);

    console.log(direction);
  }
});

Answer 9

Вот как я это сделал:

var leftKey = 37, upKey = 38, rightKey = 39, downKey = 40;
var keystate;
document.addEventListener("keydown", function (e) {
    keystate[e.keyCode] = true;
});
document.addEventListener("keyup", function (e) {
    delete keystate[e.keyCode];
});

if (keystate[leftKey]) {
//code to be executed when left arrow key is pushed.
}
if (keystate[upKey]) {
//code to be executed when up arrow key is pushed.
}
if (keystate[rightKey]) {
//code to be executed when right arrow key is pushed.
}
if (keystate[downKey]) {
//code to be executed when down arrow key is pushed.
}

Answer 10

Я смог отловить их с помощью jQuery:

$(document).keypress(function (eventObject) {
    alert(eventObject.keyCode);
});

Пример: http://jsfiddle.net/AjKjU/