Aller au contenu principal

Raccourcis clavier

Vue d'ensemble​

Cette fonctionnalité vous permet de configurer les raccourcis clavier locaux et globaux de votre application Electron.

Exemple​

Raccourcis Locaux​

Les raccourcis clavier locaux sont ceux qui ne sont déclenchés que lorsque l'application a le focus. 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 to be:

docs/fiddles/features/keyboard-shortcuts/local (33.2.1)Open in Fiddle
const { app, BrowserWindow, Menu, MenuItem } = require('electron/main')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

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)

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

REMARQUE : Dans le code ci-dessus, vous pouvez voir que l'accélérateur diffère selon le système d'exploitation de l'utilisateur . Pour MacOS, c'est Alt+Cmd+I, alors que pour Linux et Windows, c'est Alt+Shift+I.

Après avoir lancé cette application Electron, vous devriez voir le menu de l'application avec le raccourci local que vous venez de définir:

Menu avec un raccourci local

Si vous cliquez sur Aide ou appuyez sur l'accélérateur défini, puis ouvrez le terminal depuis lequel vous avez exécuté votre application Electron, vous verrez le message qui a été généré après avoir déclenché l'événement click : "Electron rocks!".

Raccourcis globaux​

Pour configurer un raccourci clavier global, vous devez utiliser le module globalShortcut pour détecter les événements du clavier même si l'application n'a pas le focus.

Starting with a working application from the Quick Start Guide, update the main.js to be:

docs/fiddles/features/keyboard-shortcuts/global (33.2.1)Open in Fiddle
const { app, BrowserWindow, globalShortcut } = require('electron/main')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

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

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

NOTE: Dans le code ci-dessus, la combinaison CommandOrControl utilise Command sur macOS et Control sur Windows/Linux.

Après avoir lancé l'application Electron, si vous appuyez sur la combinaison de touches définie puis que vous ouvrez le terminal depuis lequel vous avez exécuté votre application Electron, vous verrez qu'Electron adore les raccourcis globaux!

Raccourcis dans une BrowserWindow​

Utilisation des API web​

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.

docs/fiddles/features/keyboard-shortcuts/web-apis (33.2.1)Open in Fiddle
function handleKeyPress (event) {
  // You can put code here to handle the keypress.
  document.getElementById('last-keypress').innerText = event.key
  console.log(`You pressed ${event.key}`)
}

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

Note: le troisième paramètre true signifie que l'écouteur recevra toujours les actions des touches avant les autres écouteurs d'événement afin qu'ils ne puissent pas appeler eux-même stopPropagation().

Interception des événements dans le processus principal​

The before-input-event event is emitted before dispatching keydown and keyup events in the page. Il peut être utilisé pour intercepter et gérer des raccourcis personnalisés qui ne sont pas visibles dans le menu.

Commençons avec une application fonctionnelle issue du Quick Start Guide, mettez à jour le fichier main.js avec les lignes suivantes :

docs/fiddles/features/keyboard-shortcuts/interception-from-main (33.2.1)Open in Fiddle
const { app, BrowserWindow } = require('electron/main')

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

Après avoir lancé l'application Electron, si vous ouvrez le terminal depuis lequel vous avez exécuté votre application Electron et appuyez sur la combinaison de touches Ctrl+I , vous allez voir que cette combinaison de touches a été interceptée avec succès.

Utilisation de bibliothèques tierces​

Si vous ne voulez pas analyser manuellement les raccourcis, il existe des bibliothèque de détection avancée comme par exemple mousetrap. Voici des exemples d’utilisation de mousetrap s'exécutant dans le processus Renderer :

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

// combinaisons
Mousetrap.bind('command+shift+k', () => { console.log('command shift k') })

// redirection de combinaisons multiple vers la même callback
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
  console.log('command k or control k')

  // retourne false afin de se prémunir du comportement par défaut et empêcher l'événement de remonter(bublingt)
  return false
})

// séquences "à la gmail"
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')
})