← Wszystkie wpisy

Poradniki

Własne skróty klawiszowe na każdej stronie — 4 wzorce JS

15 maja 2026 · autor JustZix Team

Spędzasz dziennie godziny w jakimś panelu admina, który nie ma Ctrl+S dla zapisu, nie ma Ctrl+Enter dla wysłania formularza, nie ma / dla focusa na search. Cztery wzorce JS, którymi dorobisz Twoje skróty — niezależnie od tego, co autor strony zaplanował.

Wzorzec 1 — globalny keydown listener

Podstawa. Łapiesz keydown na document, sprawdzasz modyfikatory, wykonujesz akcję:

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

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

Klucz: e.preventDefault() żeby przeglądarka nie wykonała swojego domyślnego skrótu (Ctrl+S = zapisz stronę). Bez tego user dostanie modal zapisu HTML zamiast Twojej akcji.

Wzorzec 2 — kontekst (działa tylko poza inputami)

Pojedynczy klawisz (np. j/k = navigate między elementami) nie może działać gdy user pisze w textarea. Filtr po 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 = navigate w liście kart (jak Gmail)
  if (e.key === 'j') {
    e.preventDefault();
    document.querySelector('.card.focused')
      ?.nextElementSibling?.classList.add('focused');
  }
});

Bez tego filtra j wpisane w pole logowania uruchamiałoby Twoją nawigację — czyli user nigdy by nie napisał maila jan@example.com.

Wzorzec 3 — sekwencja klawiszy (Vim style)

Niektóre akcje warto wywołać dwoma klawiszami pod rząd, np. gg = scroll na górę strony (jak w 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 → scroll na górę
  if (e.key === 'g' && lastKey === 'g' && (now - lastKeyTime) < SEQ_TIMEOUT_MS) {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    lastKey = null;
    return;
  }

  // G (shift+g) → scroll na dół
  if (e.key === 'G' && e.shiftKey) {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    return;
  }

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

Wzorzec 4 — overlay z pomocą (?)

Skróty są bezużyteczne jeśli ich nie pamiętasz. Klawisz ? pokazuje overlay z listą Twoich shortcutów:

const SHORTCUTS = [
  ['Ctrl+S', 'Zapisz formularz'],
  ['Ctrl+/', 'Focus na search'],
  ['j / k', 'Następna / poprzednia karta'],
  ['gg', 'Scroll na górę'],
  ['G',    'Scroll na dół'],
];

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

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

            
${k}
            
${v}
          
      
Esc lub klik = zamknij
    
  `;
  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();
});

Pułapki

• Konflikty z przeglądarką: Ctrl+T, Ctrl+W, Ctrl+L są nieprzechwytywalne. Chrome je zarezerwowane na poziomie OS. Wybieraj inne (Ctrl+Shift+coś, Alt+coś).
• Konflikty z systemem: Cmd+Tab na macOS, Alt+Tab na Windows — to samo. Nie próbuj.
• SPA z routerem — niektóre SPA dynamicznie wstrzykują własne keydown listenery. Twój może odpalić się przed nimi (zostawia stopPropagation()) albo po (możesz wracać do oryginału przez removeEventListener).
• Layout PL vs US — e.key daje litery zlokalizowane, e.code daje pozycje fizyczne klawiatury. Dla skrótów typu j/k używaj e.key, dla pozycyjnych (np. WASD) e.code.

Jak wpiąć w JustZix

1. Zainstaluj JustZix.
2. Reguła per panel: wzorzec URL https://admin.mojafirma.com/*, JavaScript = wzorce 1+2+4 z tego artykułu.
3. Synchronizacja: ten sam zestaw skrótów masz na laptopie i komputerze służbowym.
4. Share: wyślij koleżance z zespołu link share — w 1 kliku importuje Twoje skróty.

Zainstaluj JustZix za darmo i zacznij pracować z prędkością klawiatury.