Горячие клавиши

Горячая клавиша — сочетание клавиш, которое выполняет команду без мыши. В Electron их три вида: клавиши пунктов меню работают, когда окно программы активно; глобальные сочетания работают всегда, даже если программа в фоне; а обработчики на странице ловят клавиши внутри окна.

Клавиши меню

Это основной способ. Сочетание указывают в свойстве accelerator пункта меню, как в уроке о меню приложения:

// main.js
{
  label: 'Экспорт',
  accelerator: 'CmdOrCtrl+E',
  click: (menuItem, win) => win?.webContents.send('menu:export'),
},

Ctrl+E в Windows или Cmd+E в macOS выполнит пункт, а само сочетание будет показано в меню рядом с названием.

Запись сочетаний

Глобальное сочетание

Модуль globalShortcut регистрирует сочетание во всей системе. Сделаем так, чтобы Ctrl+Shift+N из любой программы открывал «Заметки» с пустым полем:

// main.js
const { app, globalShortcut } = require('electron');
 
app.whenReady().then(() => {
  createWindow();
 
  const ok = globalShortcut.register('CmdOrCtrl+Shift+N', () => {
    win.show();
    win.webContents.send('menu:new-note');
  });
  if (!ok) {
    console.log('Сочетание занято другой программой');
  }
});
 
app.on('will-quit', () => {
  globalShortcut.unregisterAll();
});

register возвращает false, если сочетание уже занято. При выходе все сочетания освобождаются, чтобы не мешать другим программам.

Клавиши до страницы

Событие before-input-event у webContents позволяет перехватить клавишу до того, как её получит страница. Например, запретить Ctrl+R, чтобы пользователь случайно не перезагрузил окно:

// main.js
win.webContents.on('before-input-event', (event, input) => {
  if (input.control && input.key.toLowerCase() === 'r') {
    event.preventDefault();
  }
});

input содержит key, control, shift, alt, meta. Вызов preventDefault отменяет нажатие.

Клавиши на странице

Сочетания, которые относятся только к содержимому окна, обрабатывают обычным браузерным кодом:

// renderer.js
text.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && event.ctrlKey) {
    form.requestSubmit();
  }
});

Ctrl+Enter в поле заметки отправит форму, как кнопка «Добавить».

Частая ошибка

Глобальное сочетание перехватывается у всех программ. Если зарегистрировать через globalShortcut привычное сочетание вроде CmdOrCtrl+C или CmdOrCtrl+S, оно перестанет работать в браузере и редакторе, пока запущены «Заметки». Для команд внутри программы используйте клавиши меню, а глобальные оставьте для одного-двух редких сочетаний.