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

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

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
    }

}

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ł

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.

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

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

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.

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;

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

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

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

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

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

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>

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

To krócej.

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

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.

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

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ół

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

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

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

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>