Comment détecter lorsque l'une des touches fléchées est enfoncée? Je l'ai utilisé pour découvrir:

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

Bien que cela ait fonctionné pour toutes les autres clés, il ne l'a pas été pour les touches fléchées (peut-être parce que le navigateur est censé faire défiler ces touches par défaut).

Les touches fléchées ne sont déclenchées que par onkeydown, pas onkeypress.

Les codes clés sont les suivants:

• gauche = 37
• up = 38
• droite = 39
• vers le bas = 40

Fonction d'appel de haut en bas. Il existe différents codes pour chaque touche.

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

Plus récent et beaucoup plus propre: utilisation event.key. Plus de codes numériques arbitraires! Si vous transpilez ou savez que vos utilisateurs sont tous sur des navigateurs modernes, utilisez ceci!

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

Manipulation verbeuse:

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

Vous pouvez facilement l'étendre pour vérifier "w", "a", "s", "d", ou toute autre clé

Documents Mozilla

Navigateurs pris en charge

PS event.codeest le même pour les flèches

Peut-être la formulation la plus ters:

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

Démo (merci à l'utilisateur Angus Grant): http://jsfiddle.net/angusgrant/E3tE6/

Cela devrait fonctionner sur plusieurs navigateurs. Laissez un commentaire s'il existe un navigateur où il ne fonctionne pas.

Il existe d'autres façons d'obtenir le code clé (e.which, e.charCode et window.event au lieu de e), mais elles ne devraient pas être nécessaires. Vous pouvez en essayer la plupart sur http://www.asquare.net/javascript/tests/KeyCode.html . Notez que event.keycode ne fonctionne pas avec onkeypress dans Firefox, mais il fonctionne avec onkeydown.

Utilisez keydown, pas keypresspour les touches non imprimables telles que les touches fléchées:

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

document.onkeydown = checkKey;

La meilleure référence d'événement clé JavaScript que j'ai trouvée (en repoussant le pantalon par quirksmode, par exemple) est ici: http://unixpapa.com/js/key.html

Réponse moderne puisque keyCode est désormais déconseillé en faveur de 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
    }
};

Je pense que la méthode la plus récente serait:

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

Cela suppose que le développeur souhaite que le code soit actif n'importe où sur la page et que le client doit ignorer toute autre pression sur une touche. Éliminez l'événement.preventDefault (); si les touches, y compris celles prises par ce gestionnaire, doivent toujours être actives.

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;

Voici un exemple d'implémentation:

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

Voici comment je l'ai fait:

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

J'ai pu les piéger avec jQuery:

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

Un exemple: http://jsfiddle.net/AjKjU/

C'est le code de travail pour Chrome et 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>

Je cherchais également cette réponse jusqu'à ce que je tombe sur ce post.

J'ai trouvé une autre solution pour connaître le code clé des différentes clés, grâce à mon problème. Je voulais juste partager ma solution.

Utilisez simplement l'événement keyup / keydown pour écrire la valeur dans la console / alerte de la même manière event.keyCode. comme-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- rupam

C'est plus court.

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

Cette bibliothèque est géniale! https://craig.is/killing/mice

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

Vous devez cependant appuyer sur la séquence un peu rapidement pour mettre en surbrillance le code dans cette page.

Re répond que vous n'avez keydownpas besoin keypress.

En supposant que vous vouliez déplacer quelque chose en continu pendant que la touche est enfoncée, je trouve que cela keydownfonctionne pour tous les navigateurs sauf Opera. Pour Opera, keydownne se déclenche qu'au 1er appui. Pour permettre l'utilisation d'Opera:

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

Les touches fléchées sont déclenchées lors de la frappe

$(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 permet ctrl, alt, merde

onkeyup permet l'onglet, les flèches vers le haut, les flèches vers le bas, les flèches vers la gauche, les flèches vers le bas

Si vous utilisez jquery, vous pouvez également faire comme ça,

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

contrôler les codes clés %=37et &=38... et seulement les touches fléchées gauche = 37 haut = 38

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

Si vous voulez détecter les touches fléchées mais n'avez pas besoin de spécificités en Javascript

function checkKey(e) {
   if (e.keyCode !== 38 || e.keyCode !== 40 || e.keyCode !== 37 || e.keyCode !== 39){
    // do something
   };
}

Avec clé et ES6.

Cela vous donne une fonction distincte pour chaque touche fléchée sans utiliser de commutateur et fonctionne également avec les touches 2,4,6,8 du pavé numérique lorsqu'il NumLockest activé .

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>