← Alle Beiträge

Anleitungen

Eigene Tastenkürzel auf jeder Seite — 4 JavaScript-Muster

15 Mai 2026 · von JustZix Team

Du verbringst täglich Stunden in irgendeinem Admin-Panel, das kein Ctrl+S zum Speichern hat, kein Ctrl+Enter zum Absenden, kein / zum Fokussieren der Suche. Vier JS-Muster, um eigene Kürzel hinzuzufügen — unabhängig davon, was der Seitenautor vorgesehen hat.

Muster 1 — globaler keydown-Listener

Die Grundlage. Fange keydown auf document ab, prüfe die Modifier, führe die Aktion aus:

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

  // Ctrl+/ → das Suchfeld fokussieren
  if (e.ctrlKey && e.key === '/') {
    e.preventDefault();
    document.querySelector('input[type="search"], input[name="q"]')?.focus();
  }
});

Wichtig: e.preventDefault(), damit der Browser nicht sein Standard-Kürzel ausführt (Ctrl+S = Seite speichern). Ohne es bekommt der Nutzer den HTML-Speichern-Dialog statt deiner Aktion.

Muster 2 — kontextbewusst (nur außerhalb von Eingabefeldern)

Eine einzelne Taste (z. B. j/k = zwischen Elementen navigieren) darf nicht feuern, während der Nutzer in einem Textfeld tippt. Filtere nach 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 = durch Listen-Cards navigieren (Gmail-Stil)
  if (e.key === 'j') {
    e.preventDefault();
    document.querySelector('.card.focused')
      ?.nextElementSibling?.classList.add('focused');
  }
});

Ohne diesen Filter würde ein in ein Login-Feld getipptes j deine Navigation auslösen — der Nutzer könnte nie die E-Mail jan@example.com eintippen.

Muster 3 — Tastenfolgen (Vim-Stil)

Manche Aktionen verdienen zwei aufeinanderfolgende Tasten, z. B. gg = nach oben scrollen (wie 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 → nach oben scrollen
  if (e.key === 'g' && lastKey === 'g' && (now - lastKeyTime) < SEQ_TIMEOUT_MS) {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    lastKey = null;
    return;
  }

  // G (Shift+G) → nach unten scrollen
  if (e.key === 'G' && e.shiftKey) {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    return;
  }

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

Muster 4 — Hilfe-Overlay (?)

Kürzel sind nutzlos, wenn du sie dir nicht merken kannst. Die ?-Taste zeigt ein Overlay mit deiner Liste:

const SHORTCUTS = [
  ['Ctrl+S', 'Formular speichern'],
  ['Ctrl+/', 'Suche fokussieren'],
  ['j / k', 'Nächste / vorherige Card'],
  ['gg', 'Nach oben scrollen'],
  ['G',    'Nach unten scrollen'],
];

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 = `
    

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

            
${k}
            
${v}
          
      
Esc oder Klick = schließen
    
  `;
  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();
});

Fallstricke

• Konflikte mit dem Browser: Ctrl+T, Ctrl+W, Ctrl+L sind nicht abfangbar. Chrome reserviert sie auf OS-Ebene. Nutze andere (Ctrl+Shift+irgendwas, Alt+irgendwas).
• OS-Konflikte: Cmd+Tab auf macOS, Alt+Tab auf Windows — dasselbe. Spar dir die Mühe.
• SPAs mit Routern — manche SPAs injizieren dynamisch eigene keydown-Listener. Deiner kann davor feuern (nutze stopPropagation) oder danach (du kannst das Original per removeEventListener wiederherstellen).
• DE- vs. US-Layout — e.key gibt lokalisierte Buchstaben zurück, e.code gibt physische Tastenpositionen zurück. Für Kürzel im Stil j/k nutze e.key; für positionsbasierte (z. B. WASD) nutze e.code.

So bindest du es in JustZix ein

1. Installiere JustZix.
2. Regel pro Panel: URL-Muster https://admin.mycompany.com/*, JavaScript = Muster 1+2+4 aus diesem Artikel.
3. Sync: dieselben Kürzel auf deinem Laptop und Arbeitsrechner.
4. Teilen: sende einem Teamkollegen einen Freigabe-Link — er importiert deine Kürzel mit einem Klick.

Installiere JustZix kostenlos und arbeite mit Tastatur-Geschwindigkeit.