如何在电子中发送（模拟）键绑定到 webContents？

Question

我正在构建为网站创建桌面界面的电子应用程序。在网站上，我已经注册了键绑定，例如 Shift+? 显示了所有可用键绑定的 table。

我必须创建一个应用程序菜单，其中包含与键绑定相对应的操作。从技术上讲，当用户单击菜单项时，它应该触发网页上的键绑定。示例：

When user press Help on the menu → Shift+? keybinding is being triggered → webpage detects keypress → webpage shows the table of all registered keybindings appears.

问题是我无法将 Shift+? 键绑定发送到 webContents。这些尝试都失败了：

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

如何强制网页根据特定的键绑定执行操作（a.k.a 将键绑定发送到网页）？

UPD: 我发现了一些细节。事件的顺序应为 keyDown、char、keyUp。我做了一个发送键绑定的方便函数：

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

使用这个的 MenuItem 可能是这样的：

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

此外，在 Shift+? 的情况下有一个舱口： ? 只能在按下 Shift 时输入，所以实际上，有两个加速器 Shift+/ 和 ?.

但是我还是不知道怎么输入CmdOrControl+B这样的快捷键。

Answer 1

除了您发现的事件顺序之外，您还可以使用 sendInputEvents 参数的 modifiers 属性来发送 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>

如何在电子中发送（模拟）键绑定到 webContents？

How to send (emulate) keybinding to webContents in electron?

browser

google-chrome

key-bindings

node.js

electron