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 這不遠