← Tous les articles

Tutoriels

Ajoutez des raccourcis clavier personnalisés à n'importe quel site web

17 mai 2026 · par JustZix Team

Certains sites sont conçus pour les utilisateurs avancés avec de riches raccourcis clavier. La plupart ne le sont pas. Avec une règle JavaScript JustZix, vous pouvez ajouter vos propres raccourcis à n'importe quelle page — sauter à l'article suivant, faire défiler un long document, mettre le focus sur le champ de recherche, ou déclencher n'importe quel bouton d'une frappe.

La brique de base : un écouteur keydown

Tout système de raccourcis commence par un écouteur sur document. JustZix exécute votre JS une fois par chargement de page, donc l'écouteur s'attache tôt et couvre toute la page.

document.addEventListener('keydown', function (e) {
  // ignorer les frappes pendant la saisie dans un champ
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
    return;
  }
  // les raccourcis vont ici
});

Le return précoce est important : il empêche vos raccourcis de se déclencher pendant que l'utilisateur tape dans un champ de recherche ou de commentaire.

Exemple : faire défiler avec j et k

Ceci donne à n'importe quelle page le défilement classique de style vim qu'utilisent les lecteurs de flux.

document.addEventListener('keydown', function (e) {
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;

  if (e.key === 'j') {
    window.scrollBy({ top: 400, behavior: 'smooth' });
  } else if (e.key === 'k') {
    window.scrollBy({ top: -400, behavior: 'smooth' });
  } else if (e.key === 'g') {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
});

Exemple : sauter au lien suivant ou précédent

Beaucoup de sites ont des liens « suivant » et « précédent » mais aucun raccourci pour eux. Liez les touches fléchées (avec un modificateur pour qu'elles n'entrent pas en conflit avec le défilement normal).

document.addEventListener('keydown', function (e) {
  if (!e.altKey) return;

  if (e.key === 'ArrowRight') {
    var next = document.querySelector('a[rel="next"], .pagination-next');
    if (next) next.click();
  } else if (e.key === 'ArrowLeft') {
    var prev = document.querySelector('a[rel="prev"], .pagination-prev');
    if (prev) prev.click();
  }
});

Maintenir Alt rend la liaison sûre — elle n'interférera pas avec le comportement propre des touches fléchées du navigateur.

Exemple : mettre le focus sur le champ de recherche avec /

La touche barre oblique ouvre la recherche sur beaucoup de grands sites. Ajoutez-la partout ailleurs. Appelez preventDefault() pour que le caractère barre oblique n'atterrisse pas dans le champ.

document.addEventListener('keydown', function (e) {
  if (e.key !== '/') return;
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea') return;

  var search = document.querySelector(
    'input[type="search"], input[name="q"], input[placeholder*="earch"]'
  );
  if (search) {
    e.preventDefault();
    search.focus();
  }
});

Construisez une petite carte de raccourcis

Une fois que vous avez plusieurs raccourcis, un objet de recherche garde la règle bien rangée. Chaque touche est associée à une fonction.

var shortcuts = {
  'j': function () { window.scrollBy({ top: 400, behavior: 'smooth' }); },
  'k': function () { window.scrollBy({ top: -400, behavior: 'smooth' }); },
  'r': function () { location.reload(); },
  't': function () { window.scrollTo({ top: 0, behavior: 'smooth' }); }
};

document.addEventListener('keydown', function (e) {
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;

  var action = shortcuts[e.key];
  if (action) action();
});

Astuces

• Ignorez toujours les champs de saisie, ou vos raccourcis détourneront la frappe.
• Utilisez un modificateur (Alt, Ctrl) pour les actions destructrices comme le rechargement, pour ne pas les déclencher par accident.
• Vérifiez e.key plutôt que le déprécié e.keyCode — c'est lisible et stable.
• Limitez la règle par site si les raccourcis n'ont de sens que là.

Voyez des exemples concrets dans les exemples prêts à l'emploi, ou téléchargez JustZix pour l'ajouter à votre navigateur. Pour transformer les actions fréquentes en boutons de barre d'outils à la place, lisez les boutons copier-en-markdown et URL propre.