All geek questions in one place

How to send (emulate) a key binding to webContents in electronic?

I am creating an electronic application that makes a desktop for a website. I have already registered key bindings on the website, for example Shift+?, which shows a table of all available key bindings.

I need to create application menus that match key bindings. Technically, when a user clicks on a menu item, he has to start key binding on a web page. Example:

When the user clicks Help in the menu → the Shift+?keyword is launched → the web page detects keypress→ the web page shows a table of all registered bindings.

The problem is that I cannot send a binding Shift+?to webContents. These attempts are not performed:

webContents.sendInputEvent({type:'char', keyCode: 'Shift+?' });
webContents.sendInputEvent({type:'keydown', keyCode: 'Shift+?' });
webContents.sendInputEvent({type:'keyup', keyCode: 'Shift+?'});

How to make a web page perform an action based on a specific key binding (aka send a binding to a web page)?

UPD: I learned a few details. The order of events should be keyDown, char, keyUp. I made a convenient function for sending bindings:

function sendKeybinding(win, keyCode) {
  win.webContents.sendInputEvent({ type: 'keyDown', keyCode });
  win.webContents.sendInputEvent({ type: 'char', keyCode });
  win.webContents.sendInputEvent({ type: 'keyUp', keyCode });
}

MenuItemthat uses this might look like this:

{
  label: 'Show Keymap',
  accelerator: ['Shift+/', '?'],
  click(menuItem, browserWindow) {
    sendKeybinding(browserWindow, '?');
  },
}

There is also a stroke in the case of Shift+?: ?can only be entered when pressed Shift, so there are actually two accelerators Shift+/and ?.

However, I still do not know how to enter keybinding as CmdOrControl+B.

+4
source share
1 answer

modifiers sendInputEvents shift/ctrl/alt .. . . docs

HTML :

main.js

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

function sendKeybinding (win, keyCode) {
  let modifiers = []
  modifiers.push('shift') // 'control', 'meta', etc.
  win.webContents.sendInputEvent({ type: 'keyDown', modifiers, keyCode })
  win.webContents.sendInputEvent({ type: 'char', modifiers, keyCode })
  win.webContents.sendInputEvent({ type: 'keyUp', modifiers, keyCode })
}

app.on('ready', function () {
  let win = new BrowserWindow()
  win.loadURL(path.resolve(__dirname, 'keybind.html'))
  const menuTemplate = [
    {
      label: 'Show Keymap',
      click (menuItem, browserWindow) {
        sendKeybinding(browserWindow, '?')
      }
    }
  ]
  const menu = Menu.buildFromTemplate(menuTemplate)
  Menu.setApplicationMenu(menu)
})

keybind.html

<html>
<body>
<p id="demo">Pressed Key: </p>
<script>
document.onkeypress = function (event) {
  var elem = document.getElementById("demo")
  elem.innerHTML = 'Pressed Key: ' + event.key
  if (event.shiftKey) elem.innerHTML += ' + Shift '
  if (event.ctrlKey) elem.innerHTML += ' + Ctrl '
  if (event.metaKey) elem.innerHTML += ' + Win/Cmd '
}
</script>
</body>
</html>
+1

Source: https://habr.com/ru/post/1689529/

More articles:


All Articles