Touche crochet gauche ([) en JavaScript

Pour Crochet gauche ([), event.key vaut [ (or { with Shift), event.code vaut BracketLeft et le keyCode obsolète vaut 219. Appuyez sur n'importe quelle touche dans le détecteur de code de touche pour voir ses valeurs en direct.

Mis à jour le

PropriétéValeur
event.key[ (or { with Shift)
event.codeBracketLeft
event.keyCode / which (obsolète)219

Comment détecter le crochet gauche ([)

document.addEventListener('keydown', (event) => {
  if (event.key === "[") {
    // Left bracket ([) 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 obsolètes : ils fonctionnent encore, mais leurs valeurs diffèrent selon les navigateurs et les dispositions de clavier.

Comment les navigateurs gèrent le crochet gauche ([)

Sur de nombreuses dispositions européennes, les crochets nécessitent AltGr, ce qui peut rendre un raccourci sur [ difficile à saisir.

Dans React

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

Questions fréquentes

Quel est le keyCode du crochet gauche ([) ?
219. Il est toutefois obsolète : dans le nouveau code, utilisez event.key (« [ » ou « { » avec Maj) ou event.code (BracketLeft).
Quelle est la différence entre event.key et event.code ?
event.key est le caractère ou l'action produit par la touche avec la disposition actuelle ; event.code est la position physique de la touche, identique sur toutes les dispositions.
Faut-il utiliser keydown ou keypress ?
keydown. L'événement keypress est obsolète et ne se déclenche pas pour les touches qui ne produisent pas de caractère, comme Échap ou les touches fléchées.