← Alle Beiträge

Anleitungen

Benutzerdefinierte Tastenkürzel zu jeder Website hinzufügen

17 Mai 2026 · von JustZix Team

Manche Seiten sind für Power-User mit reichen Tastenkürzeln gebaut. Die meisten nicht. Mit einer JustZix-JavaScript-Regel können Sie jeder Seite Ihre eigenen Kürzel hinzufügen — zum nächsten Artikel springen, ein langes Dokument scrollen, das Suchfeld fokussieren oder eine beliebige Schaltfläche per Tastendruck auslösen.

Der Baustein: ein keydown-Listener

Jedes Kürzelsystem beginnt mit einem Listener auf document. JustZix führt Ihr JS einmal pro Seitenladen aus, sodass der Listener sich früh anhängt und die ganze Seite abdeckt.

document.addEventListener('keydown', function (e) {
  // Tastenanschläge ignorieren, während in einem Feld getippt wird
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
    return;
  }
  // Kürzel kommen hierher
});

Das frühe return ist wichtig: Es stoppt Ihre Kürzel davon auszulösen, während der Nutzer in ein Suchfeld oder Kommentarfeld tippt.

Beispiel: mit j und k scrollen

Das gibt jeder Seite das klassische vim-artige Scrollen, das Feed-Reader verwenden.

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' });
  }
});

Beispiel: zum nächsten oder vorherigen Link springen

Viele Seiten haben "Weiter"- und "Zurück"-Links, aber kein Kürzel dafür. Belegen Sie die Pfeiltasten (mit einem Modifikator, damit sie nicht mit dem normalen Scrollen kollidieren).

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();
  }
});

Alt zu halten macht die Belegung sicher — sie stört das eigene Pfeiltastenverhalten des Browsers nicht.

Beispiel: das Suchfeld mit / fokussieren

Die Schrägstrich-Taste öffnet die Suche auf vielen großen Seiten. Fügen Sie sie überall sonst hinzu. Rufen Sie preventDefault() auf, damit das Schrägstrich-Zeichen nicht im Feld landet.

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*="uch"]'
  );
  if (search) {
    e.preventDefault();
    search.focus();
  }
});

Eine kleine Kürzel-Zuordnung bauen

Sobald Sie mehrere Kürzel haben, hält ein Nachschlageobjekt die Regel ordentlich. Jede Taste ordnet einer Funktion zu.

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();
});

Tipps

• Überspringen Sie immer Eingabefelder, sonst kapern Ihre Kürzel das Tippen.
• Verwenden Sie einen Modifikator (Alt, Strg) für destruktive Aktionen wie Neuladen, damit Sie sie nicht versehentlich auslösen können.
• Prüfen Sie e.key statt des veralteten e.keyCode — es ist lesbar und stabil.
• Beschränken Sie die Regel pro Seite, wenn die Kürzel nur dort Sinn ergeben.

Sehen Sie ausgearbeitete Beispiele in den fertigen Beispielen oder laden Sie JustZix herunter, um es zu Ihrem Browser hinzuzufügen. Um häufige Aktionen stattdessen in Symbolleisten-Schaltflächen zu verwandeln, lesen Sie Als-Markdown-kopieren- und Saubere-URL-Schaltflächen.