Événements de clavier

Découvrez les bases de l'utilisation des événements de clavier en JavaScript

Il existe 3 types d'événements lors de l'interaction avec des événements de clavier:

  • keydownla touche du clavier a été enfoncée
  • keyupla touche du clavier a été relâchée

keydownest également déclenché lorsque la touche se répète alors que le boutonséjourspressé.

Alors que les événements souris et tactiles sont généralement écoutés sur un élément spécifique, il est courant d'écouter les événements clavier sur ledocument:

document.addEventListener('keydown', event => {
  // key pressed
})

Le paramètre passé à l'écouteur d'événements est unKeyboardEvent.

Cet objet événement, en plus duPropriétés de l'objet événementnous offre (entre autres) ces propriétés uniques:

  • altKeytrue si la touche Alt a été enfoncée lors du déclenchement de l'événement
  • codele code de la touche enfoncée, renvoyé sous forme de chaîne
  • ctrlKeytrue si la touche Ctrl a été enfoncée lors du déclenchement de l'événement
  • keyla valeur de la touche enfoncée, renvoyée sous forme de chaîne
  • localela valeur locale du clavier
  • locationleemplacement de la clésur le clavier
  • metaKeytrue si la touche méta a été enfoncée lors du déclenchement de l'événement
  • repeattrue si la touche a été répétée (par exemple, la touche n'a pas été relâchée)
  • shiftKeytrue si la touche Maj a été enfoncée lors du déclenchement de l'événement

Cette démo est un keylogger qui vous montrera les valeurs de certaines des propriétés que j'ai énumérées ci-dessus:

Voir le styloDémo de l'enregistreur de frappepar Flavio Copes (@flaviocopes) surCodePen.

Tech Wiki Online!