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

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

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

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

334
javascript keyboard-events keypress

16 ответов

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

ключей являются:

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

On клавиша вверх и вниз функция вызова. Для каждого ключа существуют разные коды.

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
    }

}
175

возможно tersest формулировка:

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;
    }
};

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

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

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

81

событие.ключ === "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 Docs

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

П. С. event.code это же для стрел

39

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

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

document.onkeydown = checkKey;

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

16

современный ответ с код в настоящее время осуждается в пользу ключ:

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
    }
};
10
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;
8

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

var targetElement =  || 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);
  }
});
8

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

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.
}
7

я смог поймать их с помощью jQuery:

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

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

5

это рабочий код для chrome и firefox 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">

    function leftArrowPressed() {
      alert("leftArrowPressed" );
      window.location = prevUrl  
    }

    function rightArrowPressed() {
      alert("rightArrowPressed" );
      window.location = nextUrl  
    }
    function topArrowPressed() {
      alert("topArrowPressed" );
      window.location = prevUrl  
    }

    function downArrowPressed() {
      alert("downArrowPressed" );
      window.location = nextUrl  
    }

        document.onkeydown = function(evt) {
                        var nextPage = $("#next_page_link")
                        var prevPage = $("#previous_page_link")
                        nextUrl = nextPage.attr("href")
                        prevUrl = prevPage.attr("href")
        evt = evt || window.event;
        switch (evt.keyCode) {
                case 37:
                leftArrowPressed(nextUrl);
                break;

                case 38:
                topArrowPressed(nextUrl);
                break;

                 case 39:
                rightArrowPressed(prevUrl);
                break;

                case 40:
                downArrowPressed(prevUrl);
                break;

        }
    };


</script>
</head>
<body>
<p>
<a id="previous_page_link" href="http://www.latest-tutorial.com">Latest Tutorials</a> 
<a id="next_page_link" href="http://www.zeeshanakhter.com">Zeeshan Akhter</a>
 </p>
</body>
</html>
4

Я также искал этот ответ, пока не наткнулся на этот пост.

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

просто используйте событие keyup/keydown, чтобы записать значение в консоли / alert то же самое, используя event.keyCode. как-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- рупам

3

Это короче.

function IsArrows (e) { return (e.keyCode >= 37 && e.keyCode <= 40); }

3

Re ответы, которые вам нужны keydown не keypress.

предполагая, что вы хотите перемещать что-то непрерывно, пока нажата клавиша, я нахожу, что keydown работает для всех браузеров, кроме Opera. Для Оперы,keydown срабатывает только при первом нажатии. Для размещения Opera используйте:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc
2

эта библиотека скалы! https://craig.is/killing/mice

Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([21, 22, 23]);
});

вам нужно нажать последовательность немного быстро, чтобы выделить код на этой странице.

2

контроль ключевых кодов %=37 и &=38... и только клавиши со стрелками влево=37 вверх=38

function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}
0