Shortcut da Tastiera

Electron offre due sistemi per gestire le scorciatoie da tastiera: globalShortcut per scorciatoie che funzionano anche quando l’app non ha il focus, e gli accelerator del menu per scorciatoie locali all’applicazione.

Scorciatoie Globali

Le scorciatoie globali funzionano in qualsiasi momento, anche quando l’app è minimizzata o in background:

const { app, globalShortcut } = require('electron');

app.whenReady().then(() => {
  // Registra una scorciatoia globale
  const registered = globalShortcut.register('CmdOrCtrl+Shift+Space', () => {
    console.log('Scorciatoia globale premuta!');
    if (mainWindow.isVisible()) {
      mainWindow.hide();
    } else {
      mainWindow.show();
      mainWindow.focus();
    }
  });

  if (!registered) {
    console.error('Registrazione scorciatoia fallita');
  }
});

// Deregistra tutte le scorciatoie quando l'app si chiude
app.on('will-quit', () => {
  globalShortcut.unregisterAll();
});

Verificare la Registrazione

// Verifica se una scorciatoia è registrata
const isRegistered = globalShortcut.isRegistered('CmdOrCtrl+Shift+Space');
console.log('Registrata:', isRegistered);

Deregistrare Scorciatoie

// Deregistra una scorciatoia specifica
globalShortcut.unregister('CmdOrCtrl+Shift+Space');

// Deregistra tutte le scorciatoie
globalShortcut.unregisterAll();

Accelerator del Menu

Gli accelerator nei menu item sono scorciatoie locali che funzionano solo quando l’app ha il focus:

const { Menu } = require('electron');

const menu = Menu.buildFromTemplate([
  {
    label: 'File',
    submenu: [
      {
        label: 'Nuovo',
        accelerator: 'CmdOrCtrl+N',
        click: () => createNewFile(),
      },
      {
        label: 'Apri',
        accelerator: 'CmdOrCtrl+O',
        click: () => openFile(),
      },
      {
        label: 'Salva',
        accelerator: 'CmdOrCtrl+S',
        click: () => saveFile(),
      },
      {
        label: 'Salva con nome',
        accelerator: 'CmdOrCtrl+Shift+S',
        click: () => saveFileAs(),
      },
    ],
  },
]);

Sintassi degli Accelerator

Modificatori

Modificatore	Descrizione
CmdOrCtrl	Cmd su macOS, Ctrl su Windows/Linux
Ctrl	Tasto Control
Alt	Tasto Alt (Option su macOS)
Shift	Tasto Shift
Super	Tasto Windows / Super
Meta	Tasto Cmd su macOS, Windows su Win/Linux

Tasti Speciali

Tasto	Esempio
Space	CmdOrCtrl+Space
Tab	Ctrl+Tab
Enter / Return	CmdOrCtrl+Enter
Backspace	CmdOrCtrl+Backspace
Delete	CmdOrCtrl+Delete
Escape / Esc	Escape
F1 - F24	F5, Ctrl+F12
Home, End	Ctrl+Home
PageUp, PageDown	Ctrl+PageUp
Frecce: Up, Down, Left, Right	Alt+Up
Plus, numadd	CmdOrCtrl+Plus

Combinazioni Comuni

'CmdOrCtrl+S'           // Salva
'CmdOrCtrl+Shift+S'     // Salva con nome
'CmdOrCtrl+Z'           // Annulla
'CmdOrCtrl+Shift+Z'     // Ripeti
'CmdOrCtrl+N'           // Nuovo
'CmdOrCtrl+O'           // Apri
'CmdOrCtrl+W'           // Chiudi finestra/tab
'CmdOrCtrl+Q'           // Esci
'CmdOrCtrl+F'           // Cerca
'CmdOrCtrl+H'           // Sostituisci
'CmdOrCtrl+P'           // Stampa
'F11'                    // Schermo intero
'CmdOrCtrl+Plus'        // Zoom in
'CmdOrCtrl+-'           // Zoom out
'CmdOrCtrl+0'           // Zoom reset

Scorciatoie nel Renderer

Puoi anche gestire le scorciatoie direttamente nel renderer con eventi DOM:

// renderer.js
document.addEventListener('keydown', (event) => {
  // Ctrl+S / Cmd+S
  if ((event.ctrlKey || event.metaKey) && event.key === 's') {
    event.preventDefault();
    saveDocument();
  }

  // Ctrl+Shift+P / Cmd+Shift+P — Command palette
  if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === 'P') {
    event.preventDefault();
    openCommandPalette();
  }

  // Escape
  if (event.key === 'Escape') {
    closeModal();
  }
});

Integrazione con IPC

Per gestire le scorciatoie nel renderer tramite il Main Process:

// main.js
ipcMain.handle('shortcuts:register', (_event, shortcut, id) => {
  return globalShortcut.register(shortcut, () => {
    mainWindow.webContents.send('shortcut:triggered', id);
  });
});

ipcMain.handle('shortcuts:unregister', (_event, shortcut) => {
  globalShortcut.unregister(shortcut);
});

// preload.js
contextBridge.exposeInMainWorld('shortcuts', {
  register: (shortcut, id) => ipcRenderer.invoke('shortcuts:register', shortcut, id),
  unregister: (shortcut) => ipcRenderer.invoke('shortcuts:unregister', shortcut),
  onTriggered: (callback) => {
    ipcRenderer.on('shortcut:triggered', (_event, id) => callback(id));
  },
});

Best Practice

1. Usa CmdOrCtrl invece di Ctrl per compatibilità cross-platform
2. Non sovrascrivere scorciatoie di sistema (es. Ctrl+C, Ctrl+V)
3. Deregistra le scorciatoie globali quando l’app si chiude
4. Usa scorciatoie globali con parsimonia — possono interferire con altre applicazioni
5. Preferisci gli accelerator del menu per scorciatoie che servono solo quando l’app ha il focus
6. Documenta le scorciatoie nella tua app per i tuoi utenti