键盘快捷键

概览

该功能允许你为 Electron 应用程序配置应用和全局键盘快捷键。

示例

本地快捷键

应用键盘快捷键仅在应用程序被聚焦时触发。 为了配置本地快捷键，你需要在创建Menu模块中的MenuItem时指定`accelerator<0>属性。

从 Quick Start Guide 中的应用开始，将以下内容更新到 main.js`。

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

  2. > 注意：在上面的代码中，您可以看到基于用户的操作系统的 accelerator 差异。 对于MacOS，是 `Alt+Cmd+I`，而对于Linux 和 Windows，则是 `Alt+Shift+I`.
  4. 启动 Electron 应用程序后，你应该看到应用程序菜单以及您刚刚定义的本地快捷方式：
  6. ![Menu with a local shortcut](https://cdn.rawgit.com/electron/electron/v14.0.0//docs/images/local-shortcut.png)
  8. 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!".
  10. ### [全局快捷键](#全局快捷键)
  12. 要配置全局键盘快捷键， 您需要使用 [globalShortcon]($49a2f2252d8e778a.md) 模块来检测键盘事件，即使应用程序没有获得键盘焦点。
  14. 从 [Quick Start Guide]($2ca6bec65da53d8a.md) 中的应用开始，将以下内容更新到 `main.js`。

const { app, globalShortcut } = require(‘electron’)

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

  2. > NOTE: In the code above, the `CommandOrControl` combination uses `Command` on macOS and `Control` on Windows/Linux.
  4. 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!
  6. ### [在浏览器窗口内的快捷方式](#在浏览器窗口内的快捷方式)
  8. #### [使用 web APIs](#使用-web-apis)
  10. 如果您想要在 [BrowserWindow]($9ca093dc663dae31.md) 中处理键盘快捷键，你可以在渲染进程中使用 [addEventListener() API](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)来监听 `kepup` 和 `keydown` [DOM事件](https://developer.mozilla.org/en-US/docs/Web/Events)。

function handleKeyPress(event) { // 你可以把处理按键按下事件的代码放在这里。 document.getElementById(“last-keypress”).innerText = event.key; console.log(你按下了 ${event.key}); }

window.addEventListener(‘keyup’, handleKeyPress, true);

  2. > 注意：第三个参数 `true` 表明了当前监听器会持续在其它监听器之前接收按键按下事件，因此无法在其它监听器中调用 `stopPropagation()`。
  4. #### [拦截主进程中的事件](#拦截主进程中的事件)
  6. 在调度页面中的`keydown`和`keyup`事件之前，会发出[`before-input-event`]($9eff0b1b29890c55.md#event-before-input-event)事件。 它可以用于捕获和处理在菜单中不可见的自定义快捷方式。
  8. 从 [Quick Start Guide]($2ca6bec65da53d8a.md) 中的应用开始，将以下内容更新到 `main.js`。

const { app, BrowserWindow } = require(‘electron’)

app.whenReady().then(() => { const win = new BrowserWindow({ width: 800, height: 600 })

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

  2. 在运行Electron应用程序之后，如果你打开你运行Electron应用的终端并按下 `Ctrl+I` 组合键，你会发现刚才按下的组合键被成功拦截了。
  4. #### [使用第三方库](#使用第三方库)
  6. 如果您不想手动进行快捷键解析，可以使用一些库来进行高级的按键检测。例如 [mousetrap](https://github.com/ccampbell/mousetrap). 以下是在渲染进程中 `mousetrap` 的使用示例：

Mousetrap.bind(‘4’, () => { console.log(‘4’) }) Mousetrap.bind(‘?’, () => { console.log(‘show shortcuts!’) }) Mousetrap.bind(‘esc’, () => { console.log(‘escape’) }, ‘keyup’)

// combinations Mousetrap.bind(‘command+shift+k’, () => { console.log(‘command shift k’) })

// map multiple combinations to the same callback Mousetrap.bind([‘command+k’, ‘ctrl+k’], () => { console.log(‘command k or control k’)

// return false to prevent default behavior and stop event from bubbling return false })

// gmail style sequences Mousetrap.bind(‘g i’, () => { console.log(‘go to inbox’) }) Mousetrap.bind(‘* a’, () => { console.log(‘select all’) })

// konami code! Mousetrap.bind(‘up up down down left right left right b a enter’, () => { console.log(‘konami code’) }) `