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

有一个known issue in Electron（最近被标记为wontfix）阻止了使用传统JS方法捕获关键事件的常用方法。

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

在main.js中使用这样的内容：

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

Answer 2

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

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

has_many :through

Answer 3

没有其他库，您可以使用电子的“ globalShortcut”

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

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

电子不听keydown事件

3 个答案: