Keyboard Shortcuts

    Example

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

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

    Open in Fiddle

    • main.js
    • index.html
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Hello World!</title>
    6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    7. </head>
    8. <body>
    9.     <h1>Hello World!</h1>
    10.     <p>Hit Alt+Shift+I on Windows, or Opt+Cmd+I on mac to see a message printed to the console.</p>
    11. </body>
    12. </html>

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

    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 , update the main.js file with the following lines:

    docs/fiddles/features/keyboard-shortcuts/global (23.0.0)

    • main.js
    • index.html
    1. const { app, BrowserWindow, globalShortcut } = require('electron')
    3. function createWindow () {
    4.   const win = new BrowserWindow({
    5.     width: 800,
    6.     height: 600,
    7.   })
    9.   win.loadFile('index.html')
    10. }
    12. app.whenReady().then(() => {
    13.   globalShortcut.register('Alt+CommandOrControl+I', () => {
    14.     console.log('Electron loves global shortcuts!')
    15.   })
    16. }).then(createWindow)
    18. app.on('window-all-closed', () => {
    19.   if (process.platform !== 'darwin') {
    20.     app.quit()
    21. })
    23. app.on('activate', () => {
    24.   if (BrowserWindow.getAllWindows().length === 0) {
    25.     createWindow()
    26.   }

    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 inside the renderer process using the addEventListener() API.

    • main.js
    • index.html
    • renderer.js
    1. // Modules to control application life and create native browser window
    2. const {app, BrowserWindow} = require('electron')
    3. const path = require('path')
    5. function createWindow () {
    6.   // Create the browser window.
    7.   const mainWindow = new BrowserWindow({
    8.     width: 800,
    9.     height: 600,
    10.   })
    12.   // and load the index.html of the app.
    13.   mainWindow.loadFile('index.html')
    15. }
    17. // This method will be called when Electron has finished
    18. // initialization and is ready to create browser windows.
    19. // Some APIs can only be used after this event occurs.
    20. app.whenReady().then(() => {
    21.   createWindow()
    23.   app.on('activate', function () {
    24.     // On macOS it's common to re-create a window in the app when the
    25.     // dock icon is clicked and there are no other windows open.
    26.     if (BrowserWindow.getAllWindows().length === 0) createWindow()
    27.   })
    28. })
    30. // Quit when all windows are closed, except on macOS. There, it's common
    31. // for applications and their menu bar to stay active until the user quits
    32. // explicitly with Cmd + Q.
    33. app.on('window-all-closed', function () {
    34.   if (process.platform !== 'darwin') app.quit()
    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.     <meta charset="UTF-8">
    6.     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    7.     <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    8.     <title>Hello World!</title>
    9.   </head>
    10.   <body>
    11.     <h1>Hello World!</h1>
    13.     <p>Hit any key with this window focused to see it captured here.</p>
    14.     <div><span>Last Key Pressed: </span><span id="last-keypress"></span></div>
    15.     <script src="./renderer.js"></script>
    16.   </body>
    17. </html>

    Intercepting events in the main process

    The before-input-event event is emitted before dispatching keydown and keyup events in the page. It can be used to catch and handle custom shortcuts that are not visible in the menu.

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

    docs/fiddles/features/keyboard-shortcuts/interception-from-main (23.0.0)

    • main.js
    • index.html
    1. const { app, BrowserWindow } = require('electron')
    3. app.whenReady().then(() => {
    4.   const win = new BrowserWindow({ width: 800, height: 600 })
    6.   win.loadFile('index.html')
    7.   win.webContents.on('before-input-event', (event, input) => {
    8.     if (input.control && input.key.toLowerCase() === 'i') {
    9.       console.log('Pressed Control+I')
    10.       event.preventDefault()
    11.     }
    12.   })
    13. })
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Hello World!</title>
    6.     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    7. </head>
    8. <body>
    9.     <h1>Hello World!</h1>
    10.     <p>Hit Ctrl+I to see a message printed to the console.</p>
    11. </body>
    12. </html>

    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 . Below are examples of usage of the mousetrap running in the Renderer process: