javascript - Electron does not listen keydown event - Stack Overflow

admin管理员组

文章数量:1340292

I am a backend developer who got a little project to fix it. So my boss gives me an electron project which runs on touch devices.

I know that I can listen any key events in Javascript if I use the document object, but in electron it does not work, it says the docuemnt cannot be found.

So implemented this when I or other support guy press the F12 button then the dev tools be rendered out in the electron app.

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();
    }
  };

But this code is not working to me. I have no idea how I can listen the F12 button is pressed.

Unfortunately I cannot render out button to the UI which can show the devtools. Because of the customers mustn't press it.

Sometimes I need to see the realtime console tab in devtools on the device.

I am a backend developer who got a little project to fix it. So my boss gives me an electron project which runs on touch devices.

I know that I can listen any key events in Javascript if I use the document object, but in electron it does not work, it says the docuemnt cannot be found.

So implemented this when I or other support guy press the F12 button then the dev tools be rendered out in the electron app.

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();
    }
  };

But this code is not working to me. I have no idea how I can listen the F12 button is pressed.

Unfortunately I cannot render out button to the UI which can show the devtools. Because of the customers mustn't press it.

Sometimes I need to see the realtime console tab in devtools on the device.

• javascript
• electron

Share Improve this question Follow asked Nov 23, 2016 at 11:35 DabagabDabagab 2,88555 gold badges2929 silver badges3232 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

There is a known issue in Electron ( which has lately been marked as wontfix ) that prevents the usual approach to catch key events using the traditional JS approach.

There also is a small library called electron-localshortcut that circumvents this issue by hijacking the Electron global shortcuts API when the window is active.

Use like this in your main.js:

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

Without additional libraries you can use "globalShortcut" of electron

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

I think F12 is preserved so I use ctrl+f12 which is not far off

You can use the library mousetrap to add global short cut, because it can be installed through node and could bypass the problem of electron mentioned in the accepted answer.

A code example in the render process would be:

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

本文标签： javascriptElectron does not listen keydown eventStack Overflow