Keycode Checker

Keycode Checker est un outil pour les développeurs qui vous permet de vérifier instantanément comment les touches que vous pressez dans votre navigateur sont reconnues comme des données d'événements dans JavaScript.

Dans le développement frontend, une détection précise des touches est nécessaire lors de l'implémentation de raccourcis ou de commandes de jeu basées sur l'entrée de l'utilisateur. Avec cet outil, vous pouvez obtenir des propriétés telles que event.key, event.code et event.keyCode en un coup d'œil et les copier en un seul clic. Il est également facile de tester le comportement de différentes dispositions de clavier (comme JIS vs US) et de combinaisons avec des touches de modification comme Shift et Ctrl.

Vous pouvez également vérifier l'historique de saisie de votre clavier et tester en toute sécurité la suppression des actions par défaut du navigateur (telles que le mouvement Tab ou le défilement Space) dans le navigateur lorsque e.preventDefault() est activé.

event.key

Représente le caractère ou la fonction réellement saisi par l'utilisateur. Par exemple, en appuyant sur Shift + 1 sur un clavier américain, on obtient ! comme event.key. C'est la propriété la plus recommandée pour évaluer l'entrée logique.

event.code

Indique la position physique de la touche pressée. Quelle que soit la disposition de la langue du clavier, appuyer sur la touche en position "A" renverra toujours KeyA. Ceci est très utile pour les actions qui dépendent de la disposition physique, comme le mouvement WASD dans les jeux.

event.keyCode / event.which

Renvoie un code numérique spécifique au système attribué à la touche pressée (par exemple, 65 pour A). Bien qu'ils soient utilisés depuis longtemps dans le développement JavaScript, ils sont désormais obsolètes. Ils ne doivent être utilisés que pour les vérifications de compatibilité descendante.

event.location

Un nombre indiquant la région physique du clavier où la touche a été pressée. Il peut distinguer les touches standard (0), les modificateurs gauches (1), les modificateurs droits (2) et les touches du pavé numérique (3).

preventDefault()

Une méthode JavaScript utilisée pour annuler le comportement par défaut du navigateur déclenché par un événement, comme le défilement de la page vers le bas lorsque la touche Space est pressée.

Q.Puis-je l'utiliser sur un smartphone ou une tablette ?

Cela fonctionne correctement si vous avez un clavier physique connecté. Cependant, avec un clavier logiciel à l'écran, l'événement keydown peut ne pas se déclencher correctement selon le système d'exploitation ou le navigateur, ou il peut toujours renvoyer le même code de touche (par exemple, 229). Cet outil est conçu pour être utilisé avec des claviers physiques.

Q.Dois-je utiliser event.key ou event.code ?

Cela dépend de votre cas d'utilisation. Si vous souhaitez évaluer la signification de la touche ou le caractère saisi (par exemple, 'Appuyez sur Entrée pour envoyer'), utilisez event.key. En revanche, si vous souhaitez baser des actions sur la position physique sur le clavier (par exemple, 'Déplacer le personnage avec W, A, S, D'), l'utilisation de event.code est la meilleure pratique.

Q.Puis-je empêcher les raccourcis comme F5 ou Ctrl+W ?

Même si vous utilisez e.preventDefault() en JavaScript, vous ne pourrez peut-être pas empêcher complètement les puissants raccourcis réservés au niveau du système d'exploitation, du navigateur ou de la sécurité, tels que la fermeture d'onglets, le rechargement de fenêtres ou l'ouverture des outils de développement du navigateur.

Q.Pourquoi event.keyCode est-il obsolète ?

Car la valeur numérique renvoyée peut varier selon le navigateur, le système d'exploitation et la disposition du clavier, entraînant des problèmes de compatibilité. Il est actuellement recommandé d'utiliser event.key ou event.code.

Q.Les données des touches saisies sont-elles envoyées à un serveur ?

Non, elles ne sont pas envoyées. Tout le traitement est effectué à l'aide de JavaScript dans votre navigateur, et votre historique de saisie au clavier n'est jamais envoyé ni enregistré sur un serveur externe.

Voici des scénarios de développement typiques où la vérification des keycodes est nécessaire.