Selon MDN, nous ne devrions certainement pas utiliser la .keyCode
propriété. Il est obsolète:
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 latérale indiquant que .keyCode
c'est uniquement fourni pour la compatibilité et que la dernière version de la spécification des événements DOM recommande d'utiliser la .key
propriété à la place.
Le problème est que ce .key
n'est pas pris en charge par les navigateurs, alors que devrions-nous utiliser? Y a-t-il quelque chose qui me manque?
javascript
key
deprecated
keycode
Jason210
la source
la source
.key
est pris en charge dans tous les principaux navigateurs developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/...Réponses:
Vous avez trois façons de le gérer, tel qu'il est écrit sur le lien que vous avez partagé.
vous devriez les envisager, c'est la bonne façon si vous voulez un support multi-navigateurs.
Cela pourrait être plus facile si vous implémentez quelque chose comme ça.
la source
De plus, tous les keyCode , qui , charCode et keyIdentifier sont obsolètes:
charCode
et nekeyIdentifier
sont pas des fonctionnalités standard.keyIdentifier
est supprimé à partir de Chrome 54 et Opera 41.0keyCode
renvoie 0, lors d'un événement de pression de touche avec des caractères normaux sur FF.La propriété clé :
Au moment d'écrire ces lignes, la
key
propriété 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: des identifiants de clé non standard et un comportement incorrect avec AltGraph. Plus d'informationsSi cela est important et / ou la compatibilité descendante l'est, vous pouvez utiliser la détection de fonctionnalités comme dans le code suivant:
Notez que la
key
valeur est différente dekeyCode
ouwhich
properties en ce que: elle contient le nom de la clé et non son code. Si votre programme a besoin de codes de caractères, vous pouvez utilisercharCodeAt()
. Pour les caractères imprimables uniques, vous pouvez utilisercharCodeAt()
, si vous avez affaire à des clés dont les valeurs contiennent plusieurs caractères, comme le ArrowUp sont les chances: vous testez des clés spéciales et prenez des mesures en conséquence. Essayez donc la mise en œuvre d' une table des valeurs clés et les codes correspondantscharCodeArr["ArrowUp"]=38
,charCodeArr["Enter"]=13
,charCodeArr[Escape]=27
... et ainsi de suite, s'il vous plaît jeter un oeil à des valeurs clés et leurs codes correspondantsPeut-être souhaitez-vous envisager la compatibilité ascendante, c'est-à-dire utiliser les propriétés héritées tant qu'elles sont disponibles, et uniquement lorsqu'elles sont supprimées, passez aux nouvelles:
Voir aussi: la documentation sur la
KeyboardEvent.code
propriété et quelques détails supplémentaires dans cette réponse .la source
charCodeArr
fonction n'existe pas. De plus,charCodeAt
ne fonctionne pas pour toutes les valeurs dee.key
. Par exemple, pour la cléEnter
/Return
, la valeur de lae.key
propriété est"Enter"
, et l'exécutioncharCodeArr
pour cette chaîne renvoie la valeur69
(qui est le code ASCII du caractèreE
).TLDR: Je vous suggère que vous devriez utiliser la nouvelle
event.key
etevent.code
propriétés au lieu des anciens. 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 y a un petit polyfill qui leur permet de sortir les noms de clé / code standard:https://github.com/shvaikalesh/shim-keyboard-event-key
Je suis venu à cette question en recherchant la raison du même avertissement MDN que OP. Après avoir cherché un peu plus, le problème avec
keyCode
devient plus clair:Le problème avec l'utilisation
keyCode
est que les claviers non anglais peuvent produire différentes sorties et même les claviers avec différentes dispositions peuvent produire des résultats incohérents. De plus, il y avait le cas deSi vous lisez la spécification W3C: https://www.w3.org/TR/uievents/#interface-keyboardevent
Il va dans une certaine profondeur en décrivant ce qui n'allait pas avec
keyCode
: https://www.w3.org/TR/uievents/#legacy-key-attributesDonc, après avoir établi la raison pour laquelle l'ancien keyCode a été remplacé, voyons ce que vous devez faire aujourd'hui:
key
etcode
).la source
KeyboardEvent.code
. En outre, les valeurs dekey
etcode
dépendent du navigateur. Les deux problèmes fontkey
etcode
pas pratique à utiliser dans des applications réelles.key
oucode
? C'est généralement une clé physique, mais cela peut aussi dépendre du verrouillage numérique et de la disposition ... Quelle est la meilleure pratique?MDN a déjà fourni une solution:
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
la source
key
est une valeur de chaîne spécifique au navigateur comme"Enter"
ou"ArrowUp"
et il n'y a pas de moyen standardisé de la convertir en code correspondant. vous aurez donc besoin d'encore plus de code standard pour convertir entre clé et code.Par exemple, si vous souhaitez détecter si la touche "Entrée" a été cliquée ou non:
Au lieu de
Fais-le comme
la source