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

Question

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

den*_*han 5 browser google-chrome key-bindings node.js electron

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

\n\n

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

\n\n

\n
当用户按菜单上的“帮助”Shift+?时 \xe2\x86\x92按键绑定被触发 \xe2\x86\x92 网页检测到keypress\xe2\x86\x92 网页显示所有已注册键绑定的表。
\n

\n\n

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

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n\n

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

\n\n

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

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n\n

使用它的MenuItem可能看起来像这样：

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n\n

Shift+?另外，带有:的情况下有一个舱口，?只有按下才能进入Shift，所以实际上有两个加速器Shift+/和?。

\n\n

但是，我仍然不知道如何输入类似的键绑定CmdOrControl+B。

\n

Answer 1

per*_*rgy 3

除了您发现的事件顺序之外，您还可以使用参数modifiers属性sendInputEvents通过按键输入发送shift/ctrl/alt 等修饰符。请参阅文档了解更多详细信息

用下面的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)
})

Run Code Online (Sandbox Code Playgroud)

按键绑定.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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，11 月前
查看次数：	3070 次
最近记录：	7 年，10 月前