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 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.

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

const { app, BrowserWindow, Menu, MenuItem } = require('electron')

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é l'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, mettez à jour le fichier main.js avec les lignes suivantes :

const { app, BrowserWindow, globalShortcut } = require('electron')

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 Electron loves global shortcuts!

Raccourcis dans un BrowserWindow

Utilisation des API web

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

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, mettez à jour le fichier main.js avec les lignes suivantes :

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

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 qui font de la 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')
})