Événements JavaScript keydown et keyup

Introduction aux événements clavier en JavaScript

Les événements clavier JavaScript permettent à votre page de réagir au moment précis où un utilisateur appuie sur une touche ou la relâche. Ils constituent la base des champs de recherche en temps réel, des raccourcis clavier, des contrôles de jeu et de la navigation accessible. Ce chapitre se concentre sur les deux événements que vous utiliserez le plus souvent — keydown et keyup — explique leurs différences, parcourt l'objet KeyboardEvent que chaque gestionnaire reçoit, et se termine par des exemples pratiques et exécutables.

Si vous débutez dans la gestion des événements en général, commencez par Introduction aux événements du navigateur et Gestion des événements dans le DOM.

keydown vs. keyup en un coup d'œil

Les deux événements se déclenchent sur l'élément qui a actuellement le focus (ou sur document si rien de spécifique n'a le focus). La différence réside dans le moment du cycle de vie de la touche où ils se déclenchent :

Événement	Se déclenche quand…	Se répète si maintenu ?	Utilisation typique
`keydown`	Une touche est enfoncée	Oui — de façon répétée	Raccourcis, déplacements dans un jeu, blocage de saisie
`keyup`	Une touche est relâchée	Non — une seule fois par appui	Détecter la fin d'un appui, finaliser l'interface

Un simple appui sur une touche produit un keydown puis un keyup. Maintenir une touche enfoncée déclenche keydown encore et encore (vous pouvez détecter ces répétitions automatiques avec event.repeat), mais keyup ne se déclenche qu'une seule fois, quand vous relâchez enfin la touche.

L'événement historique keypress est obsolète et ne doit pas être utilisé dans du nouveau code. Pour réagir au texte saisi par un utilisateur, écoutez plutôt l'événement input.

Comprendre keydown et keyup

L'événement keydown

L'événement keydown se produit lorsqu'un utilisateur appuie sur une touche du clavier. Il se déclenche avant que le caractère soit inséré dans un champ, ce qui en fait précisément le bon endroit pour appeler event.preventDefault() quand vous souhaitez bloquer la saisie. Cet événement est utile chaque fois que le moment de l'appui importe — jeux, fonctionnalités d'accessibilité ou contrôles interactifs.

Exemple d'événement keydown

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example of Keydown Event</title>
<style>
  .highlight { background-color: yellow; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const inputField = document.getElementById('inputField');
  inputField.addEventListener('keydown', function(event) {
    console.log('Key down:', event.key);
    if (event.key === "Enter") {
      this.classList.add('highlight');
      event.preventDefault(); // Prevents the default action of the enter key
    }
  });
});
</script>
</head>
<body>
<input type="text" id="inputField" placeholder="Press 'Enter' to highlight" />
</body>
</html>

Essayez vous-même »

Le code écoute un événement keydown sur le champ de saisie et vérifie si la touche enfoncée est « Enter ». Si c'est le cas, il change la couleur d'arrière-plan du champ en jaune (classe highlight) et empêche la soumission par défaut du formulaire ou les autres actions généralement associées à la touche Entrée.

L'événement keyup

L'événement keyup se déclenche lorsqu'une touche est relâchée, après l'événement keydown (remarque : l'événement historique keypress est obsolète et rarement utilisé dans le développement web moderne). Cet événement convient aux cas où vous devez savoir quand un appui de touche est terminé, par exemple lors de la mise à jour d'une interface utilisateur ou du contrôle de contenu multimédia.

Exemple d'événement keyup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Example of Keyup Event</title>
<style>
  .normal { background-color: transparent; }
  .active { background-color: lightgreen; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const textArea = document.getElementById('textArea');
  textArea.addEventListener('keyup', function(event) {
    console.log('Key up:', event.key);
    if (event.key === "Control") {
      this.classList.remove('active');
      this.classList.add('normal');
    }
  });
  textArea.addEventListener('keydown', function(event) {
    if (event.key === "Control") {
      this.classList.add('active');
    }
  });
});
</script>
</head>
<body>
<textarea id="textArea" rows="4" cols="50" placeholder="Press and release 'Control' to see the effect"></textarea>
</body>
</html>

Essayez vous-même »

Ce code fait changer la couleur d'arrière-plan de la zone de texte en vert clair (classe active) lorsque la touche Contrôle est enfoncée, et la remet à transparent (classe normal) lorsque la touche Contrôle est relâchée.

L'objet KeyboardEvent

Chaque gestionnaire keydown et keyup reçoit un KeyboardEvent. Connaître ses propriétés clés est ce qui vous permet d'écrire une logique clavier fiable.

key vs. code

Ces deux propriétés sont faciles à confondre, et choisir la mauvaise est la source d'erreurs la plus courante dans la gestion du clavier :

event.key — le caractère ou la valeur nommée produit(e), tenant compte de la disposition du clavier et des modificateurs. Appuyer sur la touche A donne "a", ou "A" si Majuscule est maintenue. Noms de touches : "Enter", "Escape", "ArrowLeft", " " (espace).
event.code — la touche physique sur le clavier, indépendamment de la disposition ou des modificateurs. La même touche physique est toujours "KeyA", que l'utilisateur tape a, A ou utilise une disposition non-QWERTY.

Utilisez key quand vous vous intéressez au caractère (saisie de texte, raccourcis présentés à l'utilisateur). Utilisez code quand vous vous intéressez à la position — par exemple, les contrôles WASD d'un jeu qui doivent fonctionner quelle que soit la disposition.

document.addEventListener('keydown', function (event) {
  console.log(event.key, event.code);
});
// Pressing Shift+A on QWERTY logs: "A" "KeyA"
// Pressing the space bar logs:     " " "Space"

Touches modificatrices et répétition

L'événement indique également quelles touches modificatrices sont maintenues et si l'appui est une répétition automatique du système :

event.altKey, event.ctrlKey, event.shiftKey, event.metaKey — des boolean, true tant que le modificateur correspondant est maintenu. (metaKey correspond à Cmd sur macOS, à la touche Windows ailleurs.)
event.repeat — true lorsqu'une touche maintenue enfoncée déclenche à nouveau keydown automatiquement. Vérifiez-le pour ignorer les répétitions automatiques.

document.addEventListener('keydown', function (event) {
  // Cross-platform "save" shortcut, ignoring auto-repeat.
  if ((event.ctrlKey || event.metaKey) && event.key === 's' && !event.repeat) {
    event.preventDefault();
    console.log('Save triggered');
  }
});

Lire les indicateurs de modificateurs directement (comme ci-dessus) est plus robuste que de suivre une variable ctrlPressed séparée, car les indicateurs sont garantis d'être synchronisés avec la réalité même si vous ratez un keyup.

Utilisations avancées des événements clavier en JavaScript

Exploiter la puissance des événements clavier comme keydown et keyup peut transformer des applications web ordinaires en plateformes hautement interactives, accessibles et efficaces. Nous développons ici leurs usages en les intégrant dans des scénarios plus complexes tels que les raccourcis personnalisés, les contrôles de jeu et les fonctionnalités d'accessibilité.

Implémenter des raccourcis personnalisés

Les raccourcis personnalisés permettent aux utilisateurs d'effectuer des actions rapidement, améliorant la productivité et l'expérience utilisateur. Cet exemple montre comment créer un raccourci personnalisé simple (Ctrl + S) pour simuler une action de sauvegarde, qui pourrait être adapté pour déclencher des fonctionnalités spécifiques dans de vraies applications.

Exemple de raccourcis personnalisés

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Custom Hotkeys Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
  let ctrlPressed = false;
  document.addEventListener('keydown', function(event) {
    if (event.key === "Control") {
      ctrlPressed = true;
    }
    // Use toLowerCase() for case-insensitive matching
    if (event.key.toLowerCase() === "s" && ctrlPressed) {
      alert('Saving your progress!');
      event.preventDefault(); // Prevent default to stop other actions like browser shortcuts
    }
  });

  document.addEventListener('keyup', function(event) {
    if (event.key === "Control") {
      ctrlPressed = false;
    }
  });
});
</script>
</head>
<body>
<p>Press <strong>Ctrl + S</strong> to simulate a save action.</p>
</body>
</html>

Essayez vous-même »

Gérer les contrôles de jeu

Les contrôles de jeu sont essentiels pour les jeux dans le navigateur. Cet exemple fournit une implémentation simple de contrôles par touches fléchées pour déplacer un objet joueur dans une zone de jeu, offrant un cadre de base qui peut être développé en mécaniques de jeu plus complexes.

Exemple de contrôles de jeu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Game Control Example</title>
<style>
  #gameArea {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
  }
  #player {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    top: 125px;
    left: 125px;
  }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const player = document.getElementById('player');
  // Note: offsetLeft/Top don't account for container padding or scroll offsets.
  // For production, consider using getBoundingClientRect() or adding padding offsets.
  let posX = player.offsetLeft;
  let posY = player.offsetTop;
  document.addEventListener('keydown', function(event) {
    switch (event.key) {
      case "ArrowUp":
        posY -= 10;
        break;
      case "ArrowDown":
        posY += 10;
        break;
      case "ArrowLeft":
        posX -= 10;
        break;
      case "ArrowRight":
        posX += 10;
        break;
    }
    player.style.left = posX + 'px';
    player.style.top = posY + 'px';
  });
});
</script>
</head>
<body>
<div id="gameArea">
  <div id="player"></div>
</div>
<p>Use arrow keys to move the red square within the game area.</p>
</body>
</html>

Essayez vous-même »

Améliorer l'accessibilité

Les améliorations d'accessibilité aident à rendre les applications web utilisables par les personnes en situation de handicap. Cet exemple se concentre sur l'utilisation des événements keydown pour naviguer entre des liens à l'aide des touches fléchées du clavier, facilitant une navigation pilotée par clavier pour les utilisateurs qui ne peuvent pas utiliser une souris.

Exemple d'amélioration de l'accessibilité

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Accessibility Navigation Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const links = document.querySelectorAll('a');
  let currentFocus = 0;
  links[currentFocus].focus();
  document.addEventListener('keydown', function(event) {
    if (event.key === "ArrowDown") {
      currentFocus = (currentFocus + 1) % links.length;
      links[currentFocus].focus();
      event.preventDefault();
    }
    if (event.key === "ArrowUp") {
      currentFocus = (currentFocus - 1 + links.length) % links.length;
      links[currentFocus].focus();
      event.preventDefault();
    }
  });
});
</script>
</head>
<body>
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>
<p>Use the Up and Down arrow keys to navigate between the links.</p>
</body>
</html>

Essayez vous-même »

Ces exemples illustrent non seulement l'implémentation technique des événements keydown et keyup, mais démontrent aussi leurs applications pratiques pour améliorer l'interactivité et l'accessibilité des applications web. En intégrant ces fonctionnalités avancées, les développeurs peuvent créer des expériences utilisateur plus engageantes et inclusives.

Conclusion

Les événements clavier comme keydown et keyup sont indispensables pour créer des applications web dynamiques et interactives. Retenez l'essentiel : keydown se déclenche (et se répète) à l'appui, keyup se déclenche une seule fois au relâchement, event.key vous donne le caractère tandis que event.code vous donne la touche physique, et les indicateurs de modificateurs ainsi que event.repeat vous permettent de construire des raccourcis robustes. Les exemples ci-dessus constituent un point de départ pour ajouter une interaction clavier à vos propres projets.

Chapitres connexes

Introduction aux événements du navigateur — comment les événements fonctionnent à un niveau général.
Gestion des événements dans le DOM — addEventListener, gestionnaires et suppression.
Événements : change, input, cut, copy, paste — réagir au texte qui arrive réellement dans un champ.
Focus : focus et blur — s'associe naturellement à la navigation clavier.
Bouillonnement et capture — comment les événements clavier se propagent dans le DOM.

Practice

Pratique

Quels événements JavaScript permettent de détecter la saisie au clavier ?

keydownkeyupkeypresskeyclick