Code de la touche Espace en JavaScript

Pour Espace, event.key vaut " " (a space), event.code vaut Space et le keyCode déprécié vaut 32. Appuyez sur n’importe quelle touche dans le Key Code Finder pour voir ses valeurs en direct.

Mis à jour le

PropriétéValeur
event.key" " (a space)
event.codeSpace
event.keyCode / which (déprécié)32

Comment détecter la touche Espace

document.addEventListener('keydown', (event) => {
  if (event.key === " ") {
    // Space was pressed
  }
});

Utilisez event.key pour réagir à la signification de la touche (elle suit la disposition du clavier) et event.code pour sa position physique, par exemple WASD dans les jeux. keyCode et which sont dépréciés : ils fonctionnent encore, mais leurs valeurs varient selon les navigateurs et les dispositions de clavier.

Comment les navigateurs gèrent la touche Espace

La valeur de la touche est un simple caractère espace, et non « Space ». La touche Espace active les boutons et les cases à cocher, et fait défiler la page lorsqu’aucun autre élément ne la traite. Appelez preventDefault() si votre contrôle personnalisé l’utilise, sinon la page risque de sauter.

Dans React

<input onKeyDown={(e) => { if (e.key === " ") { /* … */ } }} />

Questions fréquentes

Quel est le keyCode de la touche Espace ?
32. Il est toutefois déprécié : dans le nouveau code, utilisez event.key (« ␣ » : un espace) ou event.code (Space).
Quelle est la différence entre event.key et event.code ?
event.key correspond au caractère ou à l’action produit par la touche avec la disposition actuelle ; event.code correspond à la position physique de la touche, identique sur toutes les dispositions.
Faut-il utiliser keydown ou keypress ?
keydown. L’événement keypress est déprécié et ne se déclenche pas pour les touches qui ne produisent pas de caractère, comme Échap ou les flèches directionnelles.