electron/docs/tutorial/shortcuts.md

95 lines
2.8 KiB
Markdown
Raw Normal View History

2017-02-26 02:59:13 +00:00
# Keyboard Shortcuts
> Configure local and global keyboard shortcuts
## Local Shortcuts
You can use the [Menu] module to configure keyboard shortcuts that will
be triggered only when the app is focused. To do so, specify an
[`accelerator`] property when creating a [MenuItem].
```js
const {Menu, MenuItem} = require('electron')
const menu = new Menu()
menu.append(new MenuItem({
label: 'Print',
accelerator: 'CmdOrCtrl+P'
click: () => { console.log('time to print stuff') }
}))
```
It's easy to configure different key combinations based on the user's operating system.
```js
{
accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Ctrl+Shift+I'
}
```
If you want to configure a local keyboard shortcut to trigger an action that
_does not_ have a corresponding menu item, you can use the
[electron-localshortcut] npm module.
2017-02-26 03:21:33 +00:00
## Global Shortcuts
You can use the [globalShortcut] module to detect keyboard events even when
the application does not have keyboard focus.
```js
const {app, globalShortcut} = require('electron')
app.on('ready', () => {
globalShortcut.register('CommandOrControl+X', () => {
console.log('CommandOrControl+X is pressed')
})
})
```
2017-02-26 03:07:09 +00:00
## Shortcuts within a BrowserWindow
2017-02-26 02:59:13 +00:00
If you want to handle keyboard shortcuts for a [BrowserWindow], you can use the `keyup` and `keydown` event listeners on the window object inside the renderer process.
```js
window.addEventListener('keyup', doSomething, true)
```
Note the third parameter `true` which means the listener will always receive key presses before other listeners so they can't have `stopPropagation()` called on them.
2017-02-26 03:07:09 +00:00
If you don't want to do manual shortcut parsing there are libraries that do advanced key detection such as [mousetrap].
```js
Mousetrap.bind('4', function () { console.log('4')})
Mousetrap.bind('?', function () { console.log('show shortcuts!')})
Mousetrap.bind('esc', function () { console.log('escape')}, 'keyup')
// combinations
Mousetrap.bind('command+shift+k', function () { console.log('command shift k')})
// map multiple combinations to the same callback
Mousetrap.bind(['command+k', 'ctrl+k'], function () {
console.log('command k or control k')
// return false to prevent default browser behavior
// and stop event from bubbling
return false
})
// gmail style sequences
Mousetrap.bind('g i', function () { console.log('go to inbox')})
Mousetrap.bind('* a', function () { console.log('select all')})
// konami code!
Mousetrap.bind('up up down down left right left right b a enter', function () {
console.log('konami code')
})
```
2017-02-26 02:59:13 +00:00
[Menu]: ../api/menu.md
[MenuItem]: ../api/menu-item.md
[globalShortcut]: ../api/global-shortcut.md
[`accelerator`]: ../api/accelerator.md
[electron-localshortcut]: http://ghub.io/electron-localshortcut
[BrowserWindow]: ../api/browser-window.md
2017-02-26 03:07:09 +00:00
[mousetrap]: https://github.com/ccampbell/mousetrap