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:
parent
241cceb2c9
commit
77e7d828ee
10 changed files with 73 additions and 26 deletions
|
@ -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) => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue