Il n’est pas évident de capturer correctement les événements clavier en JavaScript. Voici un petit aide mémoire qui peut vous faire gagner beaucoup de temps.

Pour capturer les événements clavier, la première chose à faire est bien sûr d’ajouter un event listener pour le clavier :

document.addEventListener('keydown', function (event) {
  if (event.code === 'Space') {
    playPauseImage();
  }
  // etc...
});

On peut aussi ajouter un listener sur l’évent keypress, mais il ne se déclenche pas pour toutes les touches (comme les flèches du clavier par exemple).

Mais cela peut ne pas être suffisant, notamment si l’on souhaite capturer les appuis sur la barre espace. En effet, un appui sur la barre espace va par défaut résulter en un clic sur un bouton si celui-ci a le focus. Donc si l’on souhaite capturer un tel événement, il faut désactiver le focus sur les boutons :

document.querySelectorAll('button').forEach(function (item) {
  item.addEventListener('focus', function () {
    this.blur();
  })
});

Ceci permet de faire en sorte qu’un clic sur les boutons ne lui donne pas le focus. On pourra étendre ce procédé à d’autres éléments de l’interface s’ils peuvent garder le focus.

Enjoy!