Electron 不监听 keydown 事件

Question

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

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

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

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 中查看实时控制台选项卡。

Answer 1

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

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

在 main.js 中像这样使用：

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

Answer 2

您可以使用库mousetrap添加全局快捷方式，因为它可以通过节点安装，并且可以绕过已接受答案中提到的电子问题。

渲染过程中的代码示例是：

var Mousetrap = require('mousetrap');
Mousetrap.bind('4', function() { console.log('4'); });

Answer 3

没有额外的库，你可以使用电子的“globalShortcut”

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

我认为 F12 被保留了所以我使用了 ctrl+f12 这不远