Comment éviter les nombres magiques lors de l'appariement d'un événement.keyCode en javascript

Question

Puis-je éviter les nombres magiques lors de l'appariement de touches en javascript?

Un exemple utiliserait 13 to match the enter key.

Je pourrais spécifier mes propres constantes, mais je ne sais pas si ces valeurs sont assez stables sur différentes plates-formes/navigateurs/locales.

Answer 1

La première fois que j'ai essayé de le faire, j'ai utilisé la méthode charCodeAt de String. Par exemple, si vous vouliez détecter la presse de la « une » clé:

if ("A".charCodeAt(0) == event.keyCode) { 
    /* Do stuff here. */ 
} 

Notez que je l'majuscule « A » au lieu de « a ». Cela est dû au fait que event.keyCode est uniquement signalé en tant que valeur Unicode de la lettre majuscule (s'il s'agit d'une clé alpha). Ce qui rend ce problème un peu poilu, c'est qu'il y a plusieurs façons d'obtenir la valeur Unicode pour la touche qui a été pressée. Dans Firefox, vous avez:

• event.keyCode
• event.charCode
• event.which

Selon la documentation développeur Mozilla, la valeur Unicode de la clé sera stockée dans les deux event.keyCode ou event.charCode, mais pas les deux. Indépendamment de celui qui a le code, il sera également stocké dans event.which. Cependant, si la valeur est stockée dans charCode, elle sera sensible à la casse. Donc, en fonction de l'endroit où vous obtenez vos événements, vous devrez peut-être vérifier à la fois "A" et "A". Si vous avez le luxe de ne récupérer que votre événement clé de l'événement "onkeydown" et que vous ciblez Firefox, vous pouvez compter sur le code insensible à la casse (majuscule) défini dans event.keyCode. En fait, j'ai testé cela sur Firefox 3.0.3 sous Windows XP, Firefox 3.0.4 sur MacOS 10.4, Safari 3.2.1 sur MacOS 10.4 et OmniWeb 5.8 sur MacOS 10.4, et tout fonctionne de la même manière. Cependant, je n'ai pas essayé ceci sur n'importe quelles versions d'IE, ou opéra, etc.

Si vous voulez développer ceci à partir de rien par vous-même. Je suggère d'avoir autant de navigateurs différents que vous pouvez trouver sur autant de systèmes d'exploitation différents que vous avez accès, et faire des expériences pour découvrir comment chaque navigateur rapporte les codes clés. Cependant, quelqu'un a déjà fait ce travail. Il a même été mentionné dans one of the answers à la question que vous avez lié comme votre exemple! C'est un plug-in pour jQuery appelé js-hotkeys. Il vous permet d'enregistrer les fonctions de rappel à exécuter lorsqu'une touche ou une combinaison de touches est enfoncée. Un exemple d'utilisation que j'ai copié à partir du site du projet:

$(document).bind('keydown', 'Ctrl+a', fn); 

Il a été testé pour fonctionner sur une variété de différents navigateurs/plates-formes, donc si vous utilisez jQuery, ce qui est probablement le chemin à parcourir. Si vous ne voulez pas utiliser jQuery pour une raison quelconque, vous n'avez pas de chance. Apparemment, cela était basé sur another script que vous pourriez utiliser à la place. Je n'ai encore utilisé aucune de ces bibliothèques personnellement, donc je ne peux pas garantir leur facilité d'utilisation ou leur efficacité. Cela dit, si j'avais votre problème, c'est la direction que je chercherais à résoudre.