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 按钮。

不幸的是，我无法将按钮渲染到可以显示开发工具的 UI。因为顾客不能按。

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

Answer 1

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

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

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

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

Answer 2

可以使用库mousetrap添加全局快捷方式，因为它可以通过node安装，可以绕过接受答案中提到的electron问题

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

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

Answer 3

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

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

我觉得F12保留了所以我用ctrl+f12也差不多

Electron 不监听 keydown 事件

Electron does not listen keydown event

javascript

electron