← Tous les articles

Tutoriels

Raccourcis clavier personnalisés sur n'importe quelle page — 4 patterns JavaScript

15 mai 2026 · par JustZix Team

Vous passez des heures chaque jour dans un panneau d'admin qui n'a pas de Ctrl+S pour enregistrer, pas de Ctrl+Enter pour soumettre, pas de / pour cibler la recherche. Quatre patterns JS pour ajouter vos propres raccourcis — quoi qu'ait prévu l'auteur du site.

Pattern 1 — écouteur keydown global

La base. Captez keydown sur document, vérifiez les modificateurs, exécutez l'action :

document.addEventListener('keydown', (e) => {
  // Ctrl+Shift+S → cliquer le bouton "Enregistrer"
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault();
    document.querySelector('button[type="submit"]')?.click();
  }

  // Ctrl+/ → cibler le champ de recherche
  if (e.ctrlKey && e.key === '/') {
    e.preventDefault();
    document.querySelector('input[type="search"], input[name="q"]')?.focus();
  }
});

Clé : e.preventDefault() pour que le navigateur n'exécute pas son raccourci par défaut (Ctrl+S = enregistrer la page). Sans lui, l'utilisateur obtient la boîte de dialogue d'enregistrement HTML au lieu de votre action.

Pattern 2 — sensible au contexte (uniquement hors des champs)

Une touche seule (p. ex. j/k = naviguer entre éléments) ne peut pas se déclencher pendant que l'utilisateur tape dans un textarea. Filtrez par document.activeElement :

function isTyping() {
  const el = document.activeElement;
  if (!el) return false;
  const tag = el.tagName.toLowerCase();
  return tag === 'input' || tag === 'textarea'
    || el.isContentEditable;
}

document.addEventListener('keydown', (e) => {
  if (isTyping()) return;

  // j/k = naviguer dans les cartes de liste (style Gmail)
  if (e.key === 'j') {
    e.preventDefault();
    document.querySelector('.card.focused')
      ?.nextElementSibling?.classList.add('focused');
  }
});

Sans ce filtre, un j tapé dans un champ de connexion déclencherait votre navigation — l'utilisateur ne pourrait jamais saisir l'e-mail jean@example.com.

Pattern 3 — séquences de touches (style Vim)

Certaines actions méritent deux touches consécutives, p. ex. gg = défiler vers le haut (comme Gmail/GitHub) :

let lastKey = null;
let lastKeyTime = 0;
const SEQ_TIMEOUT_MS = 500;

document.addEventListener('keydown', (e) => {
  if (isTyping()) return;
  const now = Date.now();

  // gg → défiler vers le haut
  if (e.key === 'g' && lastKey === 'g' && (now - lastKeyTime) < SEQ_TIMEOUT_MS) {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    lastKey = null;
    return;
  }

  // G (shift+g) → défiler vers le bas
  if (e.key === 'G' && e.shiftKey) {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    return;
  }

  lastKey = e.key;
  lastKeyTime = now;
});

Pattern 4 — overlay d'aide (?)

Les raccourcis sont inutiles si vous ne vous en souvenez pas. La touche ? affiche un overlay avec votre liste :

const SHORTCUTS = [
  ['Ctrl+S', 'Enregistrer le formulaire'],
  ['Ctrl+/', 'Cibler la recherche'],
  ['j / k', 'Carte suivante / précédente'],
  ['gg', 'Défiler vers le haut'],
  ['G',    'Défiler vers le bas'],
];

function showHelp() {
  const overlay = document.createElement('div');
  overlay.style.cssText = `
    position: fixed; inset: 0; background: rgba(0,0,0,.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 999999;
  `;
  overlay.innerHTML = `
    

      
Raccourcis
      
        ${SHORTCUTS.map(([k, v]) => `
          
        `).join('')}
      

            
${k}
            
${v}
          
      
Échap ou clic = fermer
    
  `;
  overlay.onclick = () => overlay.remove();
  document.body.appendChild(overlay);
}

document.addEventListener('keydown', (e) => {
  if (isTyping()) return;
  if (e.key === '?') { e.preventDefault(); showHelp(); }
  if (e.key === 'Escape') document.querySelector('div[style*="rgba(0,0,0,.6)"]')?.remove();
});

Pièges

• Conflits avec le navigateur : Ctrl+T, Ctrl+W, Ctrl+L ne sont pas interceptables. Chrome les réserve au niveau de l'OS. Utilisez-en d'autres (Ctrl+Shift+quelque chose, Alt+quelque chose).
• Conflits OS : Cmd+Tab sur macOS, Alt+Tab sur Windows — pareil. N'insistez pas.
• SPA avec routeurs — certaines SPA injectent dynamiquement leurs propres écouteurs keydown. Le vôtre peut se déclencher avant (utilisez stopPropagation) ou après (vous pouvez restaurer l'original via removeEventListener).
• Layout AZERTY vs QWERTY — e.key renvoie les lettres localisées, e.code renvoie les positions physiques des touches. Pour les raccourcis style j/k utilisez e.key ; pour le positionnel (p. ex. ZQSD/WASD) utilisez e.code.

Comment brancher dans JustZix

1. Installez JustZix.
2. Règle par panneau : motif d'URL https://admin.mycompany.com/*, JavaScript = patterns 1+2+4 de cet article.
3. Sync : les mêmes raccourcis sur votre portable et votre machine de travail.
4. Partage : envoyez un lien de partage à un collègue — il importe vos raccourcis en un clic.

Installez JustZix gratuitement et travaillez à la vitesse du clavier.