Wykrywanie naciśnięć klawiszy strzałek w JavaScript

458

Jak wykryć naciśnięcie jednego ze strzałek? Użyłem tego, aby dowiedzieć się:

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

Chociaż działał dla każdego innego klawisza, nie działał dla klawiszy strzałek (być może dlatego, że przeglądarka ma domyślnie przewijać te klawisze).

Mihsathe
źródło

Odpowiedzi:

733

Klawisze strzałek są uruchamiane tylko przez onkeydown, a nie przez onkeypress.

Kluczami są:

  • po lewej = 37
  • w górę = 38
  • prawo = 39
  • w dół = 40
Mark Kahn
źródło
15
Niektóre przeglądarki wyzwalają keypresszdarzenia dla klawiszy strzałek, ale masz rację, że keydownzawsze działa dla klawiszy strzałek.
Tim Down
4
Jeśli naciśniesz%, otrzymasz także keyCode 37
xorcus
9
@xorcus - Nie, bierzesz udział 53w keydownwydarzeniu. Dostajesz 37z keypress, co jest inną rzeczą
Mark Kahn
7
Co powiesz na onkeyup?
1nfiniti
2
@MrCroft - lub też posłuchaj onkeyupi zatrzymaj tam wydarzenie. Jednak realistycznie nie powinieneś modyfikować zachowania interfejsu użytkownika za pomocą Javascript.
Mark Kahn
225

Przy klawiszach funkcji połączenia w górę i w dół. Istnieją różne kody dla każdego klucza.

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
    }

}
ketan
źródło
Co robi druga linia?
eshellborn,
16
Aby wyjaśnić, „e || window.event ”oznacza, że ​​jeśli„ e ”jest zdefiniowaną wartością, będzie to wynik„ || ” wyrażenie. Jeśli „e” nie jest zdefiniowane, „window.event” będzie wynikiem „||” wyrażenie. Jest to więc w skrócie: e = e ? e : window.event; Lub:if (typeof(e) === "undefined") { e = window.event; }
Michael Calvin,
17
Ma to umożliwić działanie na starszych wersjach IE (wcześniejszych niż IE9), w których zdarzenie nie zostało przekazane do funkcji modułu obsługi.
Mark Rhodes
12
Dla przypomnienia keyCode jest liczbą i najlepiej użyć ===
alexrogers
11
@ ketan chodziło o to, że keyCode jest liczbą i powinien być sprawdzony jak keyCode === 32, nie keyCode == '32'lub keyCode === '32'.
Nenotlep
98

event.key === „ArrowRight” ...

Nowsze i znacznie czystsze: użyj event.key. Nigdy więcej dowolnych kodów liczbowych! Jeśli dokonujesz transpozycji lub wiesz, że wszyscy użytkownicy korzystają z nowoczesnych przeglądarek, użyj tego!

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

Pełna obsługa:

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

Możesz łatwo rozszerzyć to, aby sprawdzić "w", "a", "s", "d", lub dowolny inny klucz

Dokumenty Mozilla

Obsługiwane przeglądarki

PS event.codejest taki sam dla strzał

Gibolt
źródło
5
Dziękujemy za korzystanie, keya nie keyCode, to było przestarzałe.
v010dya
8
Uwaga z MDN: Internet Explorer, Edge (16 i wcześniejsze) oraz Firefox (36 i wcześniejsze) używają „Left”, „Right”, „Up” i „Down” zamiast „ArrowLeft”, „ArrowRight”, „ArrowUp ”i„ ArrowDown ”.
Simon
95

Prawdopodobnie najkrótsza formuła:

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 (dzięki użytkownikowi Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

To powinno działać w różnych przeglądarkach. Pozostaw komentarz, jeśli istnieje przeglądarka, w której nie działa.

Istnieją inne sposoby uzyskania kodu klucza (np. E.charCode i window.event zamiast e), ale nie powinny być konieczne. Możesz wypróbować większość z nich na stronie http://www.asquare.net/javascript/tests/KeyCode.html . Zauważ, że event.keycode nie działa z onkeypress w Firefox, ale działa z onkeydown.

1 ''
źródło
3
Musiałem spojrzeć na definicję lakoniczny , potem (sprightfully) postulowali, że tersest było niewłaściwe koniugacji; niestety, przyznaję: moja troska była obalona .
ashleedawg
20

Używaj keydown, nie keypressw przypadku klawiszy niedrukowalnych, takich jak klawisze strzałek:

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

document.onkeydown = checkKey;

Najlepsze odniesienie do zdarzenia kluczowego JavaScript, jakie znalazłem (na przykład pokonując tryb quirksmode), znajduje się tutaj: http://unixpapa.com/js/key.html

Tim Down
źródło
16

Nowoczesna odpowiedź, ponieważ keyCode jest teraz przestarzałe na rzecz klucza :

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
    }
};
Joshua Fan
źródło
12

Uważam, że najnowszą metodą byłoby:

document.addEventListener("keydown", function(event) {
  event.preventDefault();
  const key = event.key; // "ArrowRight", "ArrowLeft", "ArrowUp", or "ArrowDown"
  switch (key) { // change to event.key to key to use the above variable
    case "ArrowLeft":
      // Left pressed
      <do something>
      break;
    case "ArrowRight":
      // Right pressed
      <do something>
      break;
    case "ArrowUp":
      // Up pressed
      <do something>
      break;
    case "ArrowDown":
      // Down pressed
      <do something>
      break;
  }
});

Zakłada się, że programista chce, aby kod był aktywny w dowolnym miejscu na stronie, a klient powinien zignorować wszelkie inne naciśnięcia klawiszy. Wyeliminuj event.preventDefault (); linia, jeśli naciśnięcia klawiszy, w tym te przechwycone przez ten moduł obsługi, powinny być nadal aktywne.

lrhorer
źródło
9
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;
Kennebec
źródło
1
Czy nie warto umieszczać arrspoza funkcją? Nie trzeba go odtwarzać za każdym razem
Grief
8

Oto przykładowa implementacja:

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);
  }
});
RobPW
źródło
Dostaję 0 $ nie jest zdefiniowane var targetElement = typeof $0 !== 'undefined' ? $0 : document.body; lub po prostu: var targetElement = document.body;jest w porządku
papo
7

Oto jak to zrobiłem:

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.
}
OneStig
źródło
5

Byłem w stanie uwięzić je za pomocą jQuery:

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

Przykład: http://jsfiddle.net/AjKjU/

Albireo
źródło
4
keypressnie będzie działać z klawiszami strzałek. Musisz użyć $(document).on('keydown', function() {...})zamiast tego
Juribiyan
4

To jest działający kod dla chrome i 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>
Zeeshan Akhter
źródło
3

Szukałem również tej odpowiedzi, dopóki nie natknąłem się na ten post.

Znalazłem inne rozwiązanie, aby poznać kod różnych kluczy, dzięki uprzejmości mojego problemu. Chciałem tylko podzielić się moim rozwiązaniem.

Wystarczy użyć zdarzenia keyup / keydown, aby zapisać wartość w konsoli / ostrzec to samo przy użyciu event.keyCode. lubić-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- rupam

Rupam Datta
źródło
3

To krócej.

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

Andrey Vaganov
źródło
2
krótki jest dobry:if ([37,38,39,40].indexOf(e.keyCode)!=-1){ console.log('arrow pressed') }
animaacija
3

Ta biblioteka się kołysze! https://craig.is/killing/mice

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

Musisz jednak nacisnąć sekwencję nieco szybko, aby podświetlić kod na tej stronie.

Fandi Susanto
źródło
2

Re odpowiedzi, że trzeba keydownnie keypress.

Zakładając, że chcesz poruszać czymś w sposób ciągły, gdy klawisz jest wciśnięty, znajduję to keydown działa to we wszystkich przeglądarkach oprócz Opery. W przypadku Opery keydownwyzwala się tylko przy pierwszym naciśnięciu. Aby pomieścić Opera:

document.onkeydown = checkKey;
document.onkeypress = checkKey;
function checkKey(e)
{ etc etc
Alan Finners
źródło
2

Klawisze strzałek są uruchamiane przy włączaniu

$(document).on("keyup", "body", function(e) {
 if (e.keyCode == 38) {
    // up arrow
    console.log("up arrow")
  }
  if (e.keyCode == 40) {
      // down arrow
      console.log("down arrow")
  }
  if (e.keyCode == 37) {
    // left arrow
    console.log("lefy arrow")
  }
  if (e.keyCode == 39) {
    // right arrow
    console.log("right arrow")
  }
})

onkeydown pozwala na ctrl, alt, gówno

onkeyup pozwala na zakładkę, strzałki w górę, strzałki w dół, strzałki w lewo, strzałki w dół

batMan007
źródło
1

Jeśli używasz jquery, możesz to zrobić w ten sposób,

 $(document).on("keydown", '.class_name', function (event) {
    if (event.keyCode == 37) {
        console.log('left arrow pressed');
    }
    if (event.keyCode == 38) {
        console.log('up arrow pressed');
    }
    if (event.keyCode == 39) {
        console.log('right arrow pressed');
    }
    if (event.keyCode == 40) {
        console.log('down arrow pressed');
    }
 });
Kalyan Halder Raaz
źródło
0

kontrolować kody klawiszy %=37i &=38... i tylko klawisze strzałek w lewo = 37 w górę = 38

function IsArrows (e) {
   return ( !evt.shiftKey && (e.keyCode >= 37 && e.keyCode <= 40)); 
}
Juver Paredes
źródło
0

Jeśli chcesz wykryć naciśnięcia klawiszy strzałek, ale nie potrzebujesz ich w Javascript

function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}
KitKit
źródło
0

Z kluczem i ES6.

Daje to oddzielną funkcję dla każdego klawisza strzałki bez użycia przełącznika, a także działa z klawiszami 2,4,6,8 w klawiaturze numerycznej, gdy NumLockjest włączony.

const element = document.querySelector("textarea"),
  ArrowRight = k => {
    console.log(k);
  },
  ArrowLeft = k => {
    console.log(k);
  },
  ArrowUp = k => {
    console.log(k);
  },
  ArrowDown = k => {
    console.log(k);
  },
  handler = {
    ArrowRight,
    ArrowLeft,
    ArrowUp,
    ArrowDown
  };

element.addEventListener("keydown", e => {
  const k = e.key;

  if (handler.hasOwnProperty(k)) {
    handler[k](k);
  }
});
<p>Click the textarea then try the arrows</p>
<textarea></textarea>

wolt
źródło