web-dev-qa-db-fra.com

KeyboardEvent.keyCode obsolète. Qu'est-ce que cela signifie en pratique?

Selon MDN, nous devrions très certainement ne pas utiliser la propriété .keyCode. Il est déconseillé:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Sur l'école W3, ce fait est minimisé et il n'y a qu'une note de côté indiquant que .keyCode Est fourni uniquement à des fins de compatibilité et que la dernière version de la spécification des événements DOM recommande d'utiliser la propriété .key À la place. .

Le problème est que .key N'est pas supporté par les navigateurs, alors que devrions-nous utiliser? Y a-t-il quelque chose qui me manque?

javascriptkeydeprecatedkeycode
72
Jason210

Vous avez trois façons de le gérer, comme il est écrit sur le lien que vous avez partagé.

if (event.key !== undefined) {

} else if (event.keyIdentifier !== undefined) {

} else if (event.keyCode !== undefined) {

}

vous devriez les envisager, c’est la bonne manière si vous souhaitez une prise en charge croisée des navigateurs.

Cela pourrait être plus facile si vous implémentez quelque chose comme ça.

var dispatchForCode = function(event, callback) {
  var code;

  if (event.key !== undefined) {
    code = event.key;
  } else if (event.keyIdentifier !== undefined) {
    code = event.keyIdentifier;
  } else if (event.keyCode !== undefined) {
    code = event.keyCode;
  }

  callback(code);
};
21
Miguel Lattuada

En outre, tous les keyCode , qui , charCode et keyIdentifier sont obsolètes :
charCode et keyIdentifier sont des fonctionnalités non standard.
keyIdentifier est supprimé à partir de Chrome 54 et Opera 41.0
keyCode renvoie 0, lors de l'événement de frappe avec des caractères normaux sur FF.

La propriété de la clé :

 readonly attribute DOMString key

Contient une valeur d'attribut de clé correspondant à la touche appuyée

Au moment de la rédaction de ce document, la propriété key est prise en charge par tous les principaux navigateurs à partir de: Firefox 52, Chrome 55, Safari 10.1, Opera 46. Sauf Internet Explorer 11, qui a: identificateurs de clé non standard et comportement incorrect avec AltGraph. Plus d'informations
Si cela est important et/ou si la compatibilité ascendante l’est, vous pouvez utiliser la détection de caractéristiques comme dans le code suivant:

Notez que la keyvalue est différente de keyCode ou which de cette propriété: elle contient le nom de la clé et non son code. Si votre programme a besoin de codes de caractères, vous pouvez utiliser charCodeAt(). Pour les caractères imprimables simples, vous pouvez utiliser charCodeAt(), si vous utilisez des clés dont les valeurs contiennent plusieurs caractères, comme ArrowUp les chances sont les suivantes: vous testez des clés spéciales et prenez les mesures qui s’imposent. Essayez donc d'implémenter une table de valeurs de clés et leurs codes correspondants charCodeArr["ArrowUp"]=38, charCodeArr["Enter"]=13, charCodeArr[Escape]=27 ... et ainsi de suite, jetez un coup d'œil à Key Valeurs et leurs codes correspondants

if(e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        /* As @Leonid suggeted   */
        var characterCode = e.which || e.charCode || e.keyCode || 0;
    }
        /* ... code making use of characterCode variable  */

Peut-être souhaitez-vous envisager une compatibilité en aval si vous utilisez les propriétés héritées lorsqu'elles sont disponibles, et uniquement lorsqu'elles sont supprimées, passez aux nouvelles:

if(e.which || e.charCode || e.keyCode ){
        var characterCode = e.which || e.charCode || e.keyCode;
    }else if (e.key!=undefined){
        var characterCode = charCodeArr[e.key] || e.key.charCodeAt(0);
    }else{
        var characterCode = 0;
    }

Voir aussi: la propriété KeyboardEvent.codedocs et quelques détails supplémentaires dans cette réponse .

23
user10089632

TLDR: Je suggérerais que vous devriez utiliser le nouveau event.key et event.code propriétés au lieu de celles héritées. IE et Edge prennent en charge ces propriétés, mais ne prennent pas encore en charge les nouveaux noms de clé. Pour eux, il existe un petit polyfill qui leur permet de générer les noms de clé/code standard:

https://github.com/shvaikalesh/shim-keyboard-event-key

Je suis venu à cette question à la recherche de la raison du même avertissement MDN que OP. Après avoir cherché plus, le problème avec keyCode devient plus clair:

Le problème avec keyCode est que les claviers non anglais peuvent produire différentes sorties et que même les claviers avec des dispositions différentes peuvent produire des résultats incohérents. De plus, il y avait le cas de

Si vous lisez les spécifications du W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent

En pratique, keyCode et charCode sont incohérents sur toutes les plates-formes et même la même mise en œuvre sur différents systèmes d'exploitation ou en utilisant différentes localisations.

Il va un peu en profondeur décrivant ce qui n'allait pas avec keyCode: https://www.w3.org/TR/uievents/#legacy-key-attributes

Ces fonctionnalités n'ont jamais été spécifiées formellement et les implémentations actuelles du navigateur varient considérablement. La grande quantité de contenu hérité, y compris les bibliothèques de scripts, reposant sur la détection de l'agent utilisateur et agissant en conséquence, signifie que toute tentative de formalisation de ces attributs et événements hérités risquerait de compromettre la quantité de contenu corrigée ou activée. De plus, , ces attributs ne conviennent pas à une utilisation internationale et ne répondent pas non plus aux problèmes d'accessibilité.

Ainsi, après avoir déterminé la raison pour laquelle l'ancien code source a été remplacé, examinons ce que vous devez faire aujourd'hui:

  1. Tous les navigateurs modernes supportent les nouvelles propriétés (key et code).
  2. IE et Edge prennent en charge une version plus ancienne de la spécification, qui porte des noms différents pour certaines clés. Vous pouvez utiliser une cale pour cela: https://github.com/shvaikalesh/shim-keyboard-event-key (ou roulez vous-même - c'est plutôt petit de toute façon)
  3. Edge a corrigé ce bogue dans la dernière version (qui sortira probablement en avril 2018) - https://developer.Microsoft.com/en-us/Microsoft-Edge/platform/issues/8860571/
  4. Reportez-vous à la liste des clés d’événement que vous pouvez utiliser: https://www.w3.org/TR/uievents-key/
14
kumarharsh

MDN a déjà fourni une solution:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }

  var handled = false;
  if (event.key !== undefined) {
    // Handle the event with KeyboardEvent.key and set handled true.
  } else if (event.keyIdentifier !== undefined) {
    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
  } else if (event.keyCode !== undefined) {
    // Handle the event with KeyboardEvent.keyCode and set handled true.
  }

  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
}, true);
10
Vicky Gonsalves