Comment différencier les touches "Entrée" et "retour" en Javascript?

S'il y a une touche sur le clavier qui est physiquement différente, les applications de navigateur devraient être tout aussi capables que les applications de bureau pour différencier.

avec les dernières versions de Chrome (39.0.2171.95 m), Firefox (32.0.3), IE (11.0.9600.17501) et Opera (12.17), l'objet d'événement clavier possède maintenant la Propriété location. Je présume que cette propriété existe depuis un certain temps, bien qu'elle soit légèrement documentée.

Les Tests d'onkeydown révèlent que lorsque la touche Entrée" normale " est pressée, le code de saisie est de 13 et l'emplacement de 0; lorsque le bouton entrée est pressé, le code de saisie est de 13 et l'emplacement de 3.

ainsi le code suivant peut être utilisé pour définir key= = 13 si la Entrée, key= = 176 si numpad entrer:

window.onkeydown=function(ev)
{
    var e= ev || window.event,
      key = e.keyCode || e.which;

    if ((key==13) &&
        (e.location===3))
      key=176; // 176 is the scancode for the numpad enter
    // continued....
}

je fournis une mise à jour car cette question apparaît toujours près du haut des résultats de recherche google.

par MDN,KeyboardEvent.keyCode et KeyBoardEvent.charCode sont dépréciés et ne devraient plus être utilisés.

KeyboardEvent les clés peuvent être déterminées en accédant au KeyboardEvent.key,KeyboardEvent.code et KeyboardEvent.location propriétés.

KeyboardEvent.key renvoie généralement ce que vous voyez dans un éditeur de texte pour les clés de sortie et le nom sur les clés non-sortie (y compris être sensible à la casse).

KeyboardEvent.code renvoie une description de chaîne de caractères de la clé.

KeyboardEvent.location renvoie un entier entre 0 et 3 pour signifier la zone du clavier dans laquelle se trouve la touche (standard, gauche, droite, et numpad respectivement).

Comprendre la différence entre ces propriétés peuvent aider à déterminer qui sera le plus approprié pour votre situation donnée. Dans le le cas de cette question: event.key renvoie la même sortie ("Enter") pour les' carriage return 'et' numpad enter', alors que event.code retour "Enter" et "NumpadEnter" respectivement.

dans ce cas, si vous voulez faire la différence entre les touches numpad et clavier, vous pouvez utiliser event.code. Si vous vouliez que leur opération soit la même,event.key serait un meilleur choix.

Si vous voulait différencier entre autres touches, telles que la gauche et la droite Ctrl touches, vous aussi, vous souhaitez regarder les event.location propriété.

j'ajoute un petit jeu d'événements clavier pour voir la différence entre ces propriétés d'événements. Crédit MDN pour la fourniture d' le concept je n'ai légèrement modifié ci-dessous:

window.addEventListener("keydown", function(event) {

  let str = "key = '" + event.key + 
              "' &nbsp code = '" + event.code + "'" + 
              "' &nbsp location = '" + event.location + "'" ;
              
  let el = document.createElement("span");
  
  el.innerHTML = str + "<br/>";
 
  document.getElementById("output").appendChild(el);
  
}, true);

#output {
  font-family: Arial, Helvetica, sans-serif;
  overflow-y: auto;
  margin-left: 4em
}

#output span {
  line-height: 2em;
}

#output :nth-child(2n) {
  color: blue;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code -->

<p>
  Press keys on the keyboard to see what the KeyboardEvent's key and code values are for  each one.
</p>
<div id="output"></div>