键盘快捷键

概览

This feature allows you to configure local and global keyboard shortcuts for your Electron application.

示例

本地快捷键

Local keyboard shortcuts are triggered only when the application is focused. To configure a local keyboard shortcut, you need to specify an [accelerator] property when creating a MenuItem within the Menu module.

Starting with a working application from the Quick Start Guide, update the main.js file with the following lines:

const { Menu, MenuItem } = require('electron')
const menu = new Menu()
menu.append(new MenuItem({
  label: 'Electron',
  submenu: [{
    role: 'help',
    accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Alt+Shift+I',
    click: () => { console.log('Electron rocks!') }
  }]
}))
Menu.setApplicationMenu(menu)

NOTE: In the code above, you can see that the accelerator differs based on the user’s operating system. For MacOS, it is Alt+Cmd+I, whereas for Linux and Windows, it is Alt+Shift+I.

After launching the Electron application, you should see the application menu along with the local shortcut you just defined:

If you click Help or press the defined accelerator and then open the terminal that you ran your Electron application from, you will see the message that was generated after triggering the click event: “Electron rocks!”.

全局快捷键

To configure a global keyboard shortcut, you need to use the globalShortcut module to detect keyboard events even when the application does not have keyboard focus.

Starting with a working application from the Quick Start Guide, update the main.js file with the following lines:

const { app, globalShortcut } = require('electron')
app.whenReady().then(() => {
  globalShortcut.register('Alt+CommandOrControl+I', () => {
    console.log('Electron loves global shortcuts!')
  })
}).then(createWindow)

NOTE: In the code above, the CommandOrControl combination uses Command on macOS and Control on Windows/Linux.

After launching the Electron application, if you press the defined key combination then open the terminal that you ran your Electron application from, you will see that Electron loves global shortcuts!

在浏览器窗口内的快捷方式

Using web APIs

If you want to handle keyboard shortcuts within a BrowserWindow, you can listen for the keyup and keydown DOM events inside the renderer process using the addEventListener() API.

window.addEventListener('keyup', doSomething, true)

Note the third parameter true indicates that the listener will always receive key presses before other listeners so they can’t have stopPropagation() called on them.

Intercepting events in the main process

在调度页面中的keydown和keyup事件之前，会发出before-input-event事件。 它可以用于捕获和处理在菜单中不可见的自定义快捷方式。

示例

Starting with a working application from the Quick Start Guide, update the main.js file with the following lines:

const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
  const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } })
  win.loadFile('index.html')
  win.webContents.on('before-input-event', (event, input) => {
    if (input.control && input.key.toLowerCase() === 'i') {
      console.log('Pressed Control+I')
      event.preventDefault()
    }
  })
})

After launching the Electron application, if you open the terminal that you ran your Electron application from and press Ctrl+I key combination, you will see that this key combination was successfully intercepted.

Using third-party libraries

If you don’t want to do manual shortcut parsing, there are libraries that do advanced key detection, such as mousetrap. Below are examples of usage of the mousetrap running in the Renderer process:

Mousetrap.bind('4', () => { console.log('4') })
Mousetrap.bind('?', () => { console.log('show shortcuts!') })
Mousetrap.bind('esc', () => { console.log('escape') }, 'keyup')
// 组合
Mousetrap.bind('command+shift+k', () => { console.log('command shift k') })
// 将多个组合映射到相同的回调
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
  console.log('command k or control k')
  // 返回 false 以防止默认行为，并阻止事件冒泡
  return false
})
//  gmail 风格序列
Mousetrap.bind('g i', () => { console.log('go to inbox') })
Mousetrap.bind('* a', () => { console.log('select all') })
// konami 代码
Mousetrap.bind('up up down down left right left right b a enter', () => {
  console.log('konami code')
})