← Tutti gli articoli

Tutorial

Aggiungi scorciatoie da tastiera personalizzate a qualsiasi sito web

17 maggio 2026 · di JustZix Team

Alcuni siti sono costruiti per utenti esperti con ricche scorciatoie da tastiera. La maggior parte no. Con una regola JavaScript JustZix puoi aggiungere le tue scorciatoie a qualsiasi pagina — saltare all'articolo successivo, scorrere un lungo documento, mettere a fuoco la casella di ricerca o attivare qualsiasi pulsante con una pressione di tasto.

Il mattone di base: un ascoltatore di keydown

Ogni sistema di scorciatoie inizia con un ascoltatore su document. JustZix esegue il tuo JS una volta per caricamento di pagina, quindi l'ascoltatore si aggancia presto e copre l'intera pagina.

document.addEventListener('keydown', function (e) {
  // ignora le pressioni di tasti mentre si scrive in un campo
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
    return;
  }
  // le scorciatoie vanno qui
});

Il return anticipato è importante: impedisce alle tue scorciatoie di attivarsi mentre l'utente scrive in una casella di ricerca o in un campo commento.

Esempio: scorri con j e k

Questo dà a qualsiasi pagina il classico scorrimento in stile vim che usano i lettori di feed.

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

Esempio: salta al link successivo o precedente

Molti siti hanno link "successivo" e "precedente" ma nessuna scorciatoia per essi. Associa i tasti freccia (con un modificatore così non vanno in conflitto con il normale scorrimento).

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

Tenere premuto Alt rende l'associazione sicura — non interferirà con il comportamento dei tasti freccia del browser.

Esempio: metti a fuoco la casella di ricerca con /

Il tasto barra apre la ricerca su molti grandi siti. Aggiungilo ovunque. Chiama preventDefault() così il carattere barra non finisce nel campo.

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

Costruisci una piccola mappa di scorciatoie

Una volta che hai diverse scorciatoie, un oggetto di ricerca mantiene ordinata la regola. Ogni tasto mappa a una funzione.

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

Consigli

• Salta sempre i campi di input, altrimenti le tue scorciatoie dirotteranno la digitazione.
• Usa un modificatore (Alt, Ctrl) per le azioni distruttive come il ricaricamento così non puoi attivarle per sbaglio.
• Controlla e.key anziché il deprecato e.keyCode — è leggibile e stabile.
• Limita la regola per sito se le scorciatoie hanno senso solo lì.

Vedi esempi sviluppati negli esempi pronti all'uso, oppure scarica JustZix per aggiungerlo al tuo browser. Per trasformare le azioni frequenti in pulsanti della barra degli strumenti, leggi i pulsanti copia-come-markdown e URL pulito.