Electron 不监听 keydown 事件

Question

我是一名后端开发人员，有一个小项目来修复它。所以我的老板给了我一个在触摸设备上运行的电子项目。

我知道如果我使用 document 对象，我可以在 Javascript 中监听任何关键事件，但在电子中它不起作用，它说 docuemnt cannot be found 。

所以当我或其他支持人员按下 F12 按钮然后开发工具在 electron 应用程序中呈现时实现了这一点。

 mainWindow = new BrowserWindow({
    'web-preferences': {'web-security': false}
  });

  mainWindow.onkeydown = function (e) {
    console.log("Key down");
    if (e.which === 123) {
      console.log("Key is F12");
      mainWindow.webContents.openDevTools();
    }
  };

但是这段代码对我不起作用。我不知道如何听到按下 F12 按钮。

不幸的是，我无法将按钮渲染到可以显示 devtools 的 UI。因为客户不能按它。

有时我需要在设备上的 devtools 中查看实时控制台选项卡。

原文由 Dabagab 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Electron 中有一个已知问题（最近被标记为 wontfix ），它阻止了使用传统 JS 方法捕获关键事件的常用方法。

还有一个名为 electron-localshortcut 的小型库，它通过在窗口处于活动状态时劫持 Electron 全局快捷方式 API 来规避此问题。

在你的 main.js 中这样使用：

 const electronLocalshortcut = require('electron-localshortcut');
electronLocalshortcut.register(mainWindow, 'F12', () => {
    // Open DevTools
});

原文由 Jens Habegger 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

无需额外的库，您可以使用电子的“globalShortcut”

 const { app, BrowserWindow, globalShortcut } = require("electron");
globalShortcut.register("CmdOrCtrl+F12", () => {
  mainWindow.isFocused() && mainWindow.webContents.toggleDevTools();
});

我认为 F12 已保留，所以我使用了不远的 ctrl+f12

原文由 Doğan Kara 发布，翻译遵循 CC BY-SA 4.0 许可协议