← Wszystkie wpisy

Poradniki

Dodaj własne skróty klawiszowe do dowolnej strony

17 maja 2026 · autor JustZix Team

Niektóre strony są zbudowane dla zaawansowanych użytkowników z bogatymi skrótami klawiszowymi. Większość nie jest. Dzięki regule JavaScript JustZix możesz dodać własne skróty do dowolnej strony — skocz do następnego artykułu, przewiń długi dokument, ustaw fokus na polu wyszukiwania lub uruchom dowolny przycisk naciśnięciem klawisza.

Element budulcowy: nasłuchiwacz keydown

Każdy system skrótów zaczyna się od jednego nasłuchiwacza na document. JustZix uruchamia twój JS raz na załadowanie strony, więc nasłuchiwacz przyczepia się wcześnie i obejmuje całą stronę.

document.addEventListener('keydown', function (e) {
  // ignoruj naciskanie klawiszy podczas pisania w polu
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
    return;
  }
  // skroty trafiaja tutaj
});

Wczesne return jest ważne: powstrzymuje twoje skróty przed uruchamianiem się, gdy użytkownik pisze w polu wyszukiwania lub polu komentarza.

Przykład: przewijaj klawiszami j i k

To daje dowolnej stronie klasyczne przewijanie w stylu vim, którego używają czytniki feedów.

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

Przykład: skocz do następnego lub poprzedniego linku

Wiele stron ma linki "następny" i "poprzedni", ale nie ma do nich skrótu. Przypisz klawisze strzałek (z modyfikatorem, by nie kolidowały ze zwykłym przewijaniem).

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

Przytrzymanie Alt czyni przypisanie bezpiecznym — nie będzie kolidować z własnym zachowaniem strzałek przeglądarki.

Przykład: ustaw fokus na polu wyszukiwania klawiszem /

Klawisz ukośnika otwiera wyszukiwanie na wielu dużych stronach. Dodaj go wszędzie indziej. Wywołaj preventDefault(), aby znak ukośnika nie wylądował w polu.

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

Zbuduj małą mapę skrótów

Gdy masz kilka skrótów, obiekt wyszukiwania utrzymuje regułę schludną. Każdy klawisz mapuje się na funkcję.

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

Wskazówki

• Zawsze pomijaj pola formularzy, bo inaczej twoje skróty przejmą pisanie.
• Używaj modyfikatora (Alt, Ctrl) dla działań niszczących, jak przeładowanie, abyś nie mógł ich uruchomić przez przypadek.
• Sprawdzaj e.key zamiast przestarzałego e.keyCode — jest czytelny i stabilny.
• Ogranicz regułę per strona, jeśli skróty mają sens tylko tam.

Zobacz opracowane przykłady w gotowych przykładach lub pobierz JustZix, aby dodać to do przeglądarki. Aby zamienić częste działania w przyciski paska narzędzi, przeczytaj przyciski kopiuj-jako-markdown i czysty URL.