Electron无法监听键盘按下事件

Question

我是一名后端开发人员，接到一个小项目需要修复它。

我的老板给了我一个在触摸设备上运行的Electron项目。

我知道如果使用document对象，可以在JavaScript中监听任何键盘事件，但在Electron中，它却无法工作，显示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中渲染出可以显示开发工具的按钮，因为客户不能按它。

有时候我需要在设备上查看开发工具中的实时控制台选项卡。

- Dabagab

Answer 1

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

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

在 main.js 中使用如下：

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

- Jens Habegger

---

Electron中的加速器文档并没有明确说明它们基于什么，但暗示了基于按键。 - Jens Habegger

谢谢，我尝试使用globalShortcut注册键盘事件，但这只对第一个打开的Electron窗口有效，如果同时打开多个窗口，则无法工作。electron-localshortcut可以在同时打开多个窗口时使用。 - toongeorges

您需要为每个窗口注册您的快捷方式，然后 localShortcut 库将负责将相应的快捷方式转发到当前活动的窗口。 - Jens Habegger

Answer 2

没有额外的库，你可以使用Electron的“globalShortcut”。

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

我认为F12已被保留，所以我使用ctrl + f12，这与其相近

- Doğan Kara

---

它适用于Windows和macOS，谢谢。没有键事件冲突，也不需要安装其他库。 - Abbos Tajimov

Answer 3

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

渲染进程中的代码示例如下：

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

- zhuzilin