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. Pour configurer un raccourci clavier local, vous devez spécifier un activateur de raccourci lors de la création d'un MenuItem au sein du module Menu.

Commençons avec une application fonctionnelle issue du Quick Start Guide, dont vous allez mettre à jour le fichier main.js avec ce contenu :

docs/fiddles/features/keyboard-shortcuts/local (33.2.0)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.

Commençons avec une application fonctionnelle issue du Quick Start Guide, dont vous allez mettre à jour le fichier main.js avec ce contenu :

docs/fiddles/features/keyboard-shortcuts/global (33.2.0)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​

Si vous voulez gérer les raccourcis clavier dans une BrowserWindow, vous pouvez écouter les événements DOM keyup et keydown dans le processus de rendu en utilisant l'API addEventListener().

docs/fiddles/features/keyboard-shortcuts/web-apis (33.2.0)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​

L’événement before-input-event est émis avant d’envoyer les événements keydown et keyup dans la 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, dont vous allez mettre à jour le fichier main.js avec les lignes suivantes :

docs/fiddles/features/keyboard-shortcuts/interception-from-main (33.2.0)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')
})