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?
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);
};
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);
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.
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 .
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:
- tous les navigateurs modernes prennent en charge les nouvelles propriétés (
key
etcode
). - 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)
- 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/
- reportez-vous à la liste des événements clés que vous pouvez utiliser: https://www.w3.org/TR/uievents-key/
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.