Обнаружение нажатия клавиш со стрелками в JavaScript
Как определить, когда нажата одна из клавиш со стрелками? Я использовал это, чтобы узнать:
function checkKey(e) {
var event = window.event ? window.event : e;
console.log(event.keyCode)
}
хотя он работал для каждой другой клавиши, это не для клавиш со стрелками (возможно, потому, что браузер должен прокручивать эти клавиши по умолчанию).
16 ответов:
клавиши со стрелками запускаются только
onkeydown
, а неonkeypress
ключей являются:
- налево = 37
- up = 38
- направо = 39
- вниз = 40
на клавише вверх и вниз функции вызова. Существуют различные коды для каждого ключа.
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 } }
возможно самая лаконичная формулировка:
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/
Это должно работать кросс-браузер. Оставьте комментарий, если есть браузер, где он не работает.
есть и другие способы, чтобы получить код-ключ (электронная.который, электронная.charcode, а окно.событие вместо e), но они не должны быть необходимы. Вы можете попробовать большинство из них в http://www.asquare.net/javascript/tests/KeyCode.html. Обратите внимание на это событие.keycode не работает с onkeypress в Firefox, но он работает с onkeydown.
событие.ключ === "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"
или любую другую клавишуП. С.
event.code
это же для стрел
использовать
keydown
, а неkeypress
для непечатаемых клавиш, таких как клавиши со стрелками:function checkKey(e) { e = e || window.event; alert(e.keyCode); } document.onkeydown = checkKey;
лучшая ссылка на ключевое событие JavaScript, которую я нашел (например, избивая штаны quirksmode), находится здесь:http://unixpapa.com/js/key.html
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;
вот пример реализации:
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); } });
вот как я это сделал:
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. }
мне удалось поймать их с помощью jQuery:
$(document).keypress(function (eventObject) { alert(eventObject.keyCode); });
пример:http://jsfiddle.net/AjKjU/
это рабочий код для 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>
Я также искал этот ответ, пока не наткнулся на этот пост.
Я нашел другое решение, чтобы узнать код клавиши, учтивость к моей проблеме. Я просто хотел поделиться своим решением.
просто используйте keyup / keydown событие для записи значения в консоли / оповещения же с помощью
event.keyCode
. как-console.log(event.keyCode) // or alert(event.keyCode)
- rupam
Re ответы, которые вам нужны
keydown
неkeypress
.предполагая, что вы хотите перемещать что-то непрерывно, пока нажата клавиша, я нахожу, что
keydown
работает для всех браузеров, кроме Opera. Для Оперы,keydown
срабатывает только при первом нажатии. Для размещения Opera используйте:document.onkeydown = checkKey; document.onkeypress = checkKey; function checkKey(e) { etc etc
эта библиотека скалы! https://craig.is/killing/mice
Mousetrap.bind('up up down down left right left right b a enter', function() { highlight([21, 22, 23]); });
вам нужно нажать последовательность немного быстро, чтобы выделить код на этой странице, хотя.