Saltar al contenido principal

Atajos del teclado

Descripción general

Esta característica le permite configurar atajos de teclado loca y global para tu aplicación Electron.

Ejemplo

Accesos directos locales

Los atajos de teclado locales son activadas sólo cuando la aplicación está enfocada. 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:

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

NOTA: En el código anterior, puede ver que el acelerador difiere según el sistema operativo del usuario. Para MacOS, es Alt+Cmd+I, mientras que para Linux y Windows, es Alt+Shift+I.

Después de lanzar la aplicación Electron, deberías ver el menú de la aplicación junto con el el atajo local que acabas de definir:

Menú con un atajo local

Si haces click en Help o presionas el acelerador definido y luego abres la terminal con la que corriste tu Aplicación, veras el mensaje que fue generado después de llamar al evento del click: "Electron rocks!".

Accesos directos globales

Para configurar un atajo de teclado global, necesita usar el módulo globalShortcut para detecta los eventos del teclado cuando la aplicación no tiene el focus del teclado.

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

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

NOTA: En el código anterior, la combinación CommandOrControl usa Command en macOS y Control en Windows/Linux.

Después de lanzar la aplicación Electron, si presionas la combinación de teclas definida y luego abres la terminar desde la que corriste tu aplicación de Electron, ¡verás como Electron ama los atajos de teclado globales!

Accesos directos en una ventana de buscador

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

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: the third parameter true indicates that the listener will always receive key presses before other listeners so they can't have stopPropagation() called on them.

Interceptando eventos en el main process

The before-input-event event is emitted before dispatching keydown and keyup events in the page. Puede ser usado para capturar y manejar accesos directos personalizados que no son visibles en el menú.

Comenzando con una aplicación funcionando desde Guía de Inicio Rápido, actualiza el archivo main.js con las siguiente lineas:

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

Después de correr tu aplicación, abres la terminal con la que corriste tu aplicación y presionas la combinación de teclas Ctrl+I, veras como ese atajo del teclado fue satisfactoriamente interceptado.

Usando librerías de terceros

Si no quiere hacer el análisis manual de los atajos hay librerías que hacen detección de teclas avanzadas, como mousetrap. A continuación se muestran ejemplos de uso de mousetrap corriendo en el Renderer process:

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

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

// map multiple combinations to the same callback
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
console.log('command k or control k')

// return false to prevent default behavior and stop event from bubbling
return false
})

// gmail style sequences
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')
})