Le raccourci « / » — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 8)

Le raccourci « / »

Événements et formulaires · niveau 2

Énoncé

De nombreux sites placent le curseur dans leur champ de recherche quand on tape « / ». Écrire ce raccourci, sans gêner l'utilisateur qui veut taper une barre oblique dans un champ de texte, ni les combinaisons avec Ctrl, Cmd ou Alt. Pourquoi faut-il appeler preventDefault ?

Corrigé


const recherche = document.querySelector("#recherche");

// « / » place le curseur dans la recherche, sauf si l'on est déjà en train
// d'écrire dans un champ (on veut alors pouvoir taper le caractère /).
document.addEventListener("keydown", (e) => {
  const cible = e.target;
  const enSaisie = cible.matches("input, textarea, select, [contenteditable]");
  if (e.key === "/" && !enSaisie && !e.ctrlKey && !e.metaKey && !e.altKey) {
    e.preventDefault();
    recherche.focus();
  }
  console.log(JSON.stringify(e.key), "| focus :", document.activeElement.id || "body");
});

On tape « / » puis « java » sur la page, puis on clique dans le champ Note et l'on tape « a/b » :


"/" | focus : recherche
"j" | focus : recherche
"a" | focus : recherche
"v" | focus : recherche
"a" | focus : recherche
"a" | focus : note
"/" | focus : note
"b" | focus : note
valeurs : ["java","a/b"]

Sans preventDefault, le caractère « / » serait inséré dans le champ de recherche, qui a reçu le focus avant que le navigateur ne traite la touche. Dans le champ Note, la barre oblique est tapée normalement.