Comment éviter les nombres magiques lors de la correspondance d'un event.keyCode en javascript

Question

Puis-je éviter les nombres magiques lors de la mise en correspondance de touches en javascript?

Un exemple serait d'utiliser 13 pour faire correspondre la clé de saisie .

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

Answer 1

La première fois que j'ai essayé de faire cela, j'ai utilisé la méthode charCodeAt de String. Par exemple, si vous souhaitez détecter la pression de la touche "a" clé:

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

Notez que j'ai utilisé les majuscules "A". au lieu de "a". En effet, event.keyCode n'est signalé que comme valeur Unicode de la lettre majuscule (s'il s'agit d'une clé alpha). Ce qui rend ce problème un peu poilu est qu’il existe plusieurs façons d’obtenir la valeur Unicode pour la clé sur laquelle vous avez appuyé. Dans Firefox, vous avez:

• event.keyCode
• event.charCode
• événement.quel

Selon la documentation du développeur Mozilla, la valeur Unicode de la clé sera stockée dans event.keyCode ou event.charCode , mais pas les deux . Indépendamment de celui qui possède le code, il sera également stocké dans event.which . Cependant, si la valeur est stockée dans charCode, elle sera sensible à la casse. Par conséquent, en fonction de l’origine de vos événements, vous devrez peut-être vérifier les deux options "a". et "A". Si vous avez le luxe d’obtenir votre événement clé uniquement à partir de la fenêtre "onkeydown". event, et que vous ciblez Firefox, vous pouvez compter sur l’obtention du code (majuscules) ne respectant pas la casse 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é cela sur les versions d'IE, d'Opera, etc.

Si vous voulez développer cela à partir de rien par vous-même. Je suggérerais d’obtenir autant de navigateurs différents que vous pouvez trouver sur autant de systèmes d’exploitation différents que vous avez accès, et de faire des expériences pour savoir comment chaque navigateur affiche les codes de clé. Cependant, quelqu'un a déjà fait ce travail. Cela a même été mentionné dans une des réponses à la question que vous avez liée comme votre exemple! Il s'agit d'un plug-in pour jQuery appelé js-hotkeys . Il vous permet d’enregistrer les fonctions de rappel à exécuter lorsque vous appuyez sur une touche ou une combinaison de touches. Un exemple d'utilisation que j'ai copié du site du projet:

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

Il a été testé pour fonctionner sur différents navigateurs / plates-formes. Par conséquent, si vous utilisez jQuery, c'est probablement la voie à suivre. Si vous ne voulez pas utiliser jQuery pour une raison quelconque, vous n’avez pas de chance. Apparemment, il s’agissait d’un autre script que vous pourriez utiliser à la place. Je n'ai encore utilisé aucune de ces bibliothèques personnellement, je ne peux donc pas en garantir la simplicité d'utilisation ni l'efficacité. Cela dit, si j’avais votre problème, c’est la direction dans laquelle je chercherais pour le résoudre.