web-dev-qa-db-fra.com

Détecter les touches fléchées en JavaScript

Comment détecter une des touches fléchées? J'ai utilisé cela 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 touches, cela n'a pas fonctionné pour les touches de direction (peut-être parce que le navigateur est supposé faire défiler ces touches par défaut).

javascriptkeypresskeyboard-events
364
mihsathe

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

les keycodes sont:

  • gauche = 37
  • up = 38
  • droite = 39
  • bas = 40
612
Mark Kahn

Sur la fonction d'appel haut et bas. Il existe différents codes pour chaque clé.

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
    }

}
187
ketan

Peut-être la formulation de 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;
    }
};

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

Cela devrait fonctionner avec plusieurs navigateurs. Laissez un commentaire s'il y a un navigateur où cela ne fonctionne pas.

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

86
1''

event.key === "ArrowRight" ...

Plus récent et beaucoup plus propre: utilisez 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 rechercher "w", "a", "s", "d" ou toute autre clé.

Mozilla Docs

Navigateurs pris en charge

P.S. event.code est le même pour les flèches

49
Gibolt

Utilisez keydown, pas keypress pour les clés non imprimables telles que les touches de direction:

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 battant le pantalon de Quirksmode, par exemple) est ici: http://unixpapa.com/js/key.html

17
Tim Down

La réponse moderne depuis keyCode est désormais obsolète au profit 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
    }
};
11
Joshua Fan
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
kennebec

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

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

J'ai pu les piéger avec jQuery:

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

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

5
Albireo

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>
4
Zeeshan Akhter

Je cherchais aussi 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, par souci de mon problème. Je voulais juste partager ma solution.

Il suffit d'utiliser l'événement keyup/keydown pour écrire la valeur dans la console/l'alerter de la même manière en utilisant event.keyCode. comme-

console.log(event.keyCode) 

// or

alert(event.keyCode)

- rupam

3
Rupam Datta

C'est plus court.

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

3
Andrey Vaganov

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 appuyer sur la séquence un peu vite pour mettre en surbrillance le code dans cette page.

2
Fandi Susanto

Je crois 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 ignore toutes les autres pressions. Éliminer event.preventDefault (); Si les pressions sur les touches, y compris celles interceptées par ce gestionnaire, doivent toujours être actives.

2
lrhorer

Répondez qu'il vous faut keydown pas keypress. 

En supposant que vous vouliez déplacer quelque chose de façon continue tant que la touche est enfoncée, je trouve que keydown fonctionne pour tous les navigateurs sauf Opera. Pour Opera, keydown ne se déclenche qu'au 1er appui. Pour permettre l'utilisation d'Opéra:

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

Si vous voulez détecter les touches fléchées mais que vous n'avez pas besoin de Javascript

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

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

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