docs: Update docs for keyboard shortcuts (#29207)

* Update docs for keyboard shortcuts

* Add a fiddle for web-apis

* Apply suggestions from code review

Co-authored-by: Erick Zhao <erick@hotmail.ca>

* Cleanup a few formatting errors and missed copies

* Add descriptions to index.html

* Focus on renderer

Co-authored-by: Erick Zhao <erick@hotmail.ca>
This commit is contained in:
Tony Ferrell 2021-05-23 19:33:22 -07:00 committed by GitHub
parent 241cceb2c9
commit 77e7d828ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 73 additions and 26 deletions

View file

@ -81,11 +81,17 @@ If you want to handle keyboard shortcuts within a [BrowserWindow], you can
listen for the `keyup` and `keydown` [DOM events][dom-events] inside the
renderer process using the [addEventListener() API][addEventListener-api].
```js
window.addEventListener('keyup', doSomething, true)
```javascript fiddle='docs/fiddles/features/keyboard-shortcuts/web-apis|focus=renderer.js'
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
> 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.
@ -95,8 +101,6 @@ The [`before-input-event`](../api/web-contents.md#event-before-input-event) even
is emitted before dispatching `keydown` and `keyup` events in the page. It can
be used to catch and handle custom shortcuts that are not visible in the menu.
##### Example
Starting with a working application from the
[Quick Start Guide](quick-start.md), update the `main.js` file with the
following lines:
@ -105,7 +109,7 @@ following lines:
const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } })
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadFile('index.html')
win.webContents.on('before-input-event', (event, input) => {