Attribut keyCode de l'événement clavier

Événements DOM KeyboardEvent

Définition et utilisation

keyCode attribut retourne déclenchant Événement onkeypress Code de caractère Unicode de la touche ou déclenchant onkeydown ou Événement onkeyup Code de touche Unicode de la touche

Différence entre les deux types de codes :

  • Code de caractères - Numéro représentant un caractère ASCII
  • Codes de touche - représentent le nombre numérique de la touche réelle sur le clavier

Ces types ne signifient pas toujours la même chose. Par exemple, les codes de touche du petit "w" et du grand "W" sont identiques, car la touche appuyée sur le clavier est la même ("W" = nombre "87"), mais les codes de caractères sont différents, car les caractères résultants sont différents ("w" ou "W", c'est-à-dire "119" ou "87"). - Veuillez consulter les exemples ci-dessous pour mieux comprendre ce point.

Avis :Pour savoir si l'utilisateur a appuyé sur une touche imprimable (par exemple "a" ou "5"), il est recommandé d'utiliser cette propriété sur l'événement onkeypress. Pour savoir si l'utilisateur a appuyé sur une touche de fonction (par exemple "F1", "CAPS LOCK" ou "Home"), utilisez les événements onkeydown ou onkeyup.

Remarque :Dans Firefox, la propriété keyCode ne fonctionne pas pour l'événement onkeypress (elle retourne uniquement 0). Pour une solution cross-navigateur, utilisez Propriété whichUtilisez avec keyCode, par exemple :

var x = event.which || event.keyCode;  // Utiliser which ou keyCode dépend du support du navigateur

Avis :Pour une liste de tous les caractères Unicode, veuillez consulter notre Référence Unicode complète.

Avis :Si vous devez convertir une valeur Unicode en caractère, utilisez Méthode fromCharCode().

Remarque :Cette propriété est lecture seule.

Remarque :Les propriétés keyCode et which sont fournies uniquement pour la compatibilité. La dernière version de la norme DOM événement recommande d'utiliser la propriété key (si disponible).

Avis :Si vous souhaitez savoir si "ALT", "CTRL", "META" ou "SHIFT" ont été appuyés lors de l'événement de frappe de touche, utilisez altKey,ctrlKey/,metaKey ou shiftKey Propriétés.

Exemple

Exemple 1

Obtenez la valeur Unicode de la touche appuyée sur le clavier :

var x = event.keyCode;

Essayez-le vous-même

Exemple 2

Utilisez onkeypress et onkeydown pour illustrer la différence entre les codes de caractères et les codes de clavier :

<input type="text" onkeypress="uniCharCode(event)" onkeydown="uniKeyCode(event)"> 
function uniCharCode(event) {
  var char = event.which || event.keyCode;
  document.getElementById("demo").innerHTML = "Code CARACTÈRE Unicode : " + char;
}
function uniKeyCode(event) {
  var key = event.keyCode;
  document.getElementById("demo2").innerHTML = "Code KEY Unicode : " + key;
}

Appuyez sur la touche "a" du clavier (sans utiliser Capslock) et les résultats de char et key seront :

Code CARACTÈRE Unicode : 97
Code KEY Unicode : 65

Essayez-le vous-même

Exemple 3

Si l'utilisateur appuie sur la touche Échap, affichez un texte :

<input type="text" onkeydown="myFunction(event)"> 
function myFunction(event) {
  var x = event.keyCode;
  if (x == 27) {  // 27 est la touche Échap
    alert("Vous avez appuyé sur la touche Échap !");
  }
}

Essayez-le vous-même

Exemple 4

Convertir la valeur Unicode en caractère (ne s'applique pas aux touches fonctionnelles) :

var x = event.keyCode;                // Obtenir la valeur Unicode
var y = String.fromCharCode(x);       // Convertir la valeur en caractère

Essayez-le vous-même

Syntaxe

event.keyCode

Détails techniques

Valeur de retour : Valeur numérique, représentant le code Unicode d'un caractère ou le code de touche Unicode.
Version DOM : Événements DOM Level 2

Support du navigateur

Propriétés Chrome IE Firefox Safari Opera
keyCode Support Support Support Support Support

Pages liées

Référence HTML DOM :Attribut key de l'événement KeyboardEvent

Référence HTML DOM :Attribut charCode de l'événement KeyboardEvent

Référence HTML DOM :Attribut which de l'événement KeyboardEvent

Événements DOM KeyboardEvent