Code JavaScript désactivé. Qu'est-ce que cela signifie dans la pratique?

selon MDN, nous devrions très certainement ne pas utiliser le .propriété keyCode. Il est déprécié:

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

sur les écoles w3, ce fait est minimisé et il n'y a qu'une note de côté disant que .keyCode est fourni pour la compatibilité seulement et que la dernière version de la spécification DOM Events recommande d'utiliser la propriété .key à la place.

le problème est que .key n'est pas pris en charge par les navigateurs, alors que devrions-nous utiliser? Est-il quelque chose que je suis absent?

39
demandé sur Jason210 2016-02-14 20:40:49

5 réponses

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 façon si vous voulez le soutien de navigateur croisé.

ça 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);
};
5
répondu Miguel Lattuada 2016-02-14 18:05:52

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);
9
répondu Vicky Gonsalves 2016-02-14 18:02:16

en outre que tous les keyCode , qui , charCode et keyIdentifier sont dépréciés :

charCode et keyIdentifier sont des caractéristiques non standard.

keyIdentifier est supprimé à partir de Chrome 54 et Opera 41.0

keyCode renvoie 0, sur l'événement keypress avec les caractères normaux sur FF.

La clé de la propriété :

 readonly attribute DOMString key

contient une valeur d'attribut clé correspondant à la touche pressée

au moment de la rédaction du présent 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és non standard et comportement incorrect avec AltGraph. plus d'information

Si cela est important et / ou la compatibilité arrière est, alors vous pouvez utiliser la détection de caractéristique comme dans le code suivant :

notez que la valeur key diffère des propriétés keyCode ou which en ce qu'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 caractères imprimables simples vous pouvez utiliser charCodeAt() , si vous avez affaire à des clés dont les valeurs contiennent plusieurs caractères comme ArrowUp les chances sont : vous testez pour les clés spéciales et de prendre des mesures en conséquence. Essayez donc de mettre en œuvre un tableau des valeurs des clés et leur correspondant codes charCodeArr["ArrowUp"]=38 , charCodeArr["Enter"]=13 , charCodeArr[Escape]=27 ... et ainsi de suite, s'il vous plaît jeter un oeil à valeurs clés 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 que vous voulez considérer la compatibilité forward I. e utilisez les propriétés héritées pendant qu'elles sont disponibles, et seulement lorsque vous 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 KeyboardEvent.code propriété docs et plus de détails dans cette réponse .

6
répondu user10089632 2017-08-24 12:36:02

TLDR: je suggère que vous devriez utiliser les nouvelles propriétés event.key et event.code au lieu des anciennes. IE et Edge ont un support pour ces propriétés, mais ne supportent pas encore les nouveaux noms de clés. Pour eux, il y a un petit polyfill qui les fait sortir les noms de clé/code standard:

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


j'en suis venu à cette question en cherchant la raison du même avertissement MDN que L'OP. Après quelques recherches supplémentaires, le problème avec keyCode devient plus clair:

le problème avec l'utilisation de keyCode est que les claviers non-anglais peuvent produire des sorties différentes et 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 la spécification W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent

dans la pratique, le code-clé et le charCode sont incohérents à travers les plates-formes et même la même implémentation sur des systèmes d'exploitation différents ou en utilisant des localisations différentes.

Il va dans une certaine 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é formellement spécifiées et les implémentations actuelles du navigateur varient de manière significative. La grande quantité de contenu hérité, y compris les bibliothèques de scripts, qui repose sur la détection de l'agent utilisateur et d'agir en conséquence signifie que toute tentative de formaliser ces attributs et événements hérités risquerait de casser autant de contenu qu'il serait corriger ou activer. En outre, ces attributs ne sont pas adaptés pour l'utilisation internationale, et ils ne répondent pas non plus aux préoccupations en matière d'accessibilité.

donc, après avoir établi la raison pour laquelle le keyCode legacy a été remplacé, regardons ce que vous devez faire aujourd'hui:

  1. tous les navigateurs modernes prennent en charge les nouvelles propriétés ( key et code ).
  2. IE et Edge prennent en charge une version plus ancienne du spec, qui a des noms différents pour certaines clés. Vous pouvez utiliser une cale pour elle: https://github.com/shvaikalesh/shim-keyboard-event-key (ou rouler votre propre, il est plutôt petit, de toute façon)
  3. Edge a corrigé ce bug 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 événements clés que vous pouvez utiliser: https://www.w3.org/TR/uievents-key/
5
répondu kumar_harsh 2018-04-18 15:03:02

fais ce que je fais. Je n'ai tout simplement pas de soins. MDN peut dire qu'il est déprécié, mais s'ils ne fournissent pas d'alternative (sauf keyIdentifier), alors vous devez utiliser la version dépréciée.

2
répondu Bálint 2016-02-14 18:02:54