In this section we will study the keyboard shortcuts in Electron. In Electron, keyboard shortcuts are called accelerators, and they can be assigned to manipulations in the application menu as well as globally, so they can be triggered even if your application doesn’t have the keyboard core.

Electron has two kinds of processing in the main process and the renderer process, so we can register the shortcuts in the main process and the renderer process respectively.

The main process registers shortcuts

There are two ways to register shortcuts in the main process, one is to use the Menu module to simulate the shortcuts, the other is the global shortcuts.

Local shortcuts

We can use the MENU module in Electron to configure keyboard shortcuts, which can only be triggered when the APP is in focus state, which is rarely used. We must specify a Accelerator property when we create the MenuItem.

Example:
const { Menu, MenuItem } = require('electron'); const menu = new Menu(); Menu.append (new MenuItem({label: 'Print', Accelerator: 'Ctrl+P', Click: () => {console.log(' Print')}}))

We can also configure different key combinations depending on the user’s operating system:

accelerator: process.platform === 'darwin' ? 'Alt+Ctrl+I' : 'Ctrl+Shift+I'

Global shortcuts

When the application does not have keyboard focus, we can use the GlobalShortcut module to detect keyboard events. Let’s look at the following example.

Example:

In the following code, we set the shortcut key of the developer tool to Alt+B:

/ / introduction of electron const {app, BrowserWindow, globalShortcut} = the require (" electron "); let win; Function createWindow() {win = new BrowserWindow({width: 800, height: 400, webPreferences: { nodeIntegration: true, }, }); // Loads the index.html file win.loadFile('.. /html/index.html'); / / automatically open the developer tools / / win webContents. OpenDevTools (); On ('closed', () => {win = null; }); } // Electron will call this function app.on('ready', createWindow) after initialization and ready to create the browser window; // exit app.on('window-all-closed', () => {if (process.platform! == 'darwin') { app.quit(); }}); app.on('activate', () => { if (win === null) { createWindow(); }}); / / register shortcuts app. On (' ready 'async () = > {globalShortcut. Register (Alt + B, function () {win. WebContents. OpenDevTools (); }) createWindow(); })

Then we run the NPM start program and just press Alt+B to open the developer tools.

If we do not want to set the shortcut key, we can also unregister the shortcut key, the code is as follows:

App. On (' ready '() = > {/ / cancellation of shortcuts globalShortcut. Register (Alt + B, () = > {the console. The log (' by pressing Alt + B); }) / / cancellation of all shortcuts globalShortcut unregisterAll (); })

Renderer process registration shortcuts

There are also two ways to register shortcuts for the renderer process, either by using the browser to listen for keyboard events, or by using third-party modules.

Shortcuts to the browser window

We can use the Browse window to listen for keyboard events, which is a regular way to determine for ourselves what keys are pressed:

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

The third parameter, true, means that the listener will always receive the keystroke before any other listener, to prevent other listeners from calling stopPropagation().

Leverage third party modules

If we don’t want to manually resolve shortcuts, we can use some libraries for advanced keystroke detection, such as Mousetrap.

First we need to install the library and then import it using the Script tag

npm install mousetrap --save

Introducing index.js file into HTML page: :

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utf-8 "> <title>my_electron</ head> <body> <h2> </h2> <script type="text/javascript" src=".js/index.js"></script> </body> </html>

The contents of index.js file:

const Mousetrap = require('mousetrap'); / / 1: a single shortcut Mousetrap. Bind (' 4 ', () = > {the console. The log (' 4 ')}) Mousetrap. Bind ('? ', () => {console.log(' Show shortcut! ')}) Mousetrap. Bind (' esc '() = > {the console. The log (' escape')}, 'keyup) / / 2: Combination Mousetrap. Bind (Alt + shift + k, () = > {the console. The log (' Alt + shift + k)}) / / 3: Mousetrap. Bind ([' ALT + K ', 'CTRL + K '], () => {console.log(' ALT + K or CTRL + K '); // return false to prevent default behavior and stop events from bubbling }) / / Gmail style sequence Mousetrap. Bind (' g I '() = > {the console. The log (' go to the inbox')}); A Mousetrap. The bind (' * ', () = > {the console. The log (' selection ')}); // konami code! Mousetrap. Bind ('up up down left right left b a enter', () = bb0 {console.log('xkd_v3 new version '); })