← Tutti gli articoli

Tutorial

Scorciatoie da tastiera personalizzate su qualsiasi pagina — 4 pattern JavaScript

15 maggio 2026 · di JustZix Team

Passi ore ogni giorno in qualche pannello di amministrazione che non ha Ctrl+S per salvare, non ha Ctrl+Enter per inviare, non ha / per mettere a fuoco la ricerca. Quattro pattern JS per aggiungere le tue scorciatoie — indipendentemente da cosa abbia previsto l'autore del sito.

Pattern 1 — listener keydown globale

Le basi. Cattura keydown su document, controlla i modificatori, esegui l'azione:

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

  // Ctrl+/ → mettere a fuoco il campo di ricerca
  if (e.ctrlKey && e.key === '/') {
    e.preventDefault();
    document.querySelector('input[type="search"], input[name="q"]')?.focus();
  }
});

Chiave: e.preventDefault() perché il browser non esegua la sua scorciatoia predefinita (Ctrl+S = salva la pagina). Senza, l'utente ottiene la finestra di salvataggio HTML invece della tua azione.

Pattern 2 — sensibile al contesto (solo fuori dai campi)

Un tasto singolo (es. j/k = navigare tra elementi) non può scattare mentre l'utente digita in una textarea. Filtra in base a 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 = navigare tra le card di una lista (stile Gmail)
  if (e.key === 'j') {
    e.preventDefault();
    document.querySelector('.card.focused')
      ?.nextElementSibling?.classList.add('focused');
  }
});

Senza questo filtro, una j digitata in un campo di login attiverebbe la tua navigazione — l'utente non potrebbe mai digitare l'e-mail gianni@example.com.

Pattern 3 — sequenze di tasti (stile Vim)

Alcune azioni meritano due tasti consecutivi, es. gg = scorri in cima (come 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 → scorri in cima
  if (e.key === 'g' && lastKey === 'g' && (now - lastKeyTime) < SEQ_TIMEOUT_MS) {
    window.scrollTo({ top: 0, behavior: 'smooth' });
    lastKey = null;
    return;
  }

  // G (shift+g) → scorri in fondo
  if (e.key === 'G' && e.shiftKey) {
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    return;
  }

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

Pattern 4 — overlay di aiuto (?)

Le scorciatoie sono inutili se non riesci a ricordartele. Il tasto ? mostra un overlay con il tuo elenco:

const SHORTCUTS = [
  ['Ctrl+S', 'Salva il modulo'],
  ['Ctrl+/', 'Metti a fuoco la ricerca'],
  ['j / k', 'Card successiva / precedente'],
  ['gg', 'Scorri in cima'],
  ['G',    'Scorri in fondo'],
];

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

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

            
${k}
            
${v}
          
      
Esc o clic = chiudi
    
  `;
  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();
});

Trappole

• Conflitti con il browser: Ctrl+T, Ctrl+W, Ctrl+L non sono intercettabili. Chrome li riserva a livello di OS. Usane altri (Ctrl+Shift+qualcosa, Alt+qualcosa).
• Conflitti con l'OS: Cmd+Tab su macOS, Alt+Tab su Windows — lo stesso. Non insistere.
• SPA con router — alcune SPA iniettano dinamicamente i propri listener keydown. Il tuo può scattare prima (usa stopPropagation) o dopo (puoi ripristinare l'originale via removeEventListener).
• Layout IT vs US — e.key restituisce le lettere localizzate, e.code restituisce le posizioni fisiche dei tasti. Per le scorciatoie stile j/k usa e.key; per quelle posizionali (es. WASD) usa e.code.

Come collegarlo a JustZix

1. Installa JustZix.
2. Regola per pannello: pattern URL https://admin.mycompany.com/*, JavaScript = pattern 1+2+4 di questo articolo.
3. Sync: le stesse scorciatoie sul portatile e sulla macchina di lavoro.
4. Condivisione: invia a un collega un link di condivisione — importa le tue scorciatoie con un clic.

Installa JustZix gratis e lavora alla velocità della tastiera.