Keyboard Events in ElectronJS

ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime.

In web development, the jQuery Keyboard Events provide a convenient way by which we can record the keypresses of the keyboard in a sequential order. These events include key combinations, special keys and modifiers and are fired as soon as the key is on its way down, is pressed and is released. These events are very important in case we want to track or trigger some functionality on certain key presses. In addition to providing Accelerators and the globalShortcut module, Electron also provide us with a way by which we can record the keyboard Events using the Instance methods and event of the built-in BrowserWindow object and the webContents property. This tutorial will demonstrate Keyboard Events in Electron. 

We assume that you are familiar with the prerequisites as covered in the above-mentioned link. For Electron to work, node and npm need to be pre-installed in the system.

• Project Structure:

Example: Follow the Steps given in How to Find Text on Page in ElectronJS to setup the basic Electron Application. Copy the Boilerplate code for the main.js file and the index.html file as provided in the article. Also perform the necessary changes mentioned for the package.json file to launch the Electron Application. We will continue building our application using the same code base. The basic steps required to setup the Electron application remain the same. 

package.json:

{
  "name": "electron-key",
  "version": "1.0.0",
  "description": "Key events in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

Output: At this point, our basic Electron Application is set up. Upon launching the application, we should see the following result

Keyboard Events in Electron: The BrowserWindow Instance and webContents Property are part of the Main Process. To import and use BrowserWindow in the Renderer Process, we will be using Electron remote module. 

index.html: Add the following snippet in that file. 

html

<h3>Key Events in Electron</h3>

index.js: Add the following snippet in that file. 

javascript

const electron = require("electron");

// Importing BrowserWindow from Main Process
// using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
const win = BrowserWindow.getFocusedWindow();

// let win = BrowserWindow.getAllWindows()[0];

win.webContents.on("before-input-event", (event, input) => {
    console.log(input);
});

The before-input-event of the webContents property works closely with the KeyboardEvent Web API. The KeyboardEvent describes a user interaction with the keyboard. It inherits the Instance method and properties of the UIEvent and the global Event object. The before-input-event Instance Event is emitted before dispatching the keydown and keyup events of the KeyboardEvent in the web page. This Instance event leverages the Constructor of the KeyboardEvent object. It returns the following parameters. 

• event: The global Event object.
• input: Object It contains the following parameters.
  • type: String This parameter defines the type of the KeyboardEvent that has occurred. Values can be either keyUp or keyDown. The before-input-event Event does not support keyPressed event since it has been deprecated from the KeyboardEvent Web API itself.
  • key: String This parameter is equivalent to the KeyboardEvent.key parameter. It is a Readonly property. This value returns a DOMString representing the key value of the key pressed. 
  • code: String This parameter is equivalent to the KeyboardEvent.code parameter. It is a Readonly property. This value returns a DOMString with the code value of the key pressed. 
  • isAutoRepeat: Boolean This parameter is equivalent to the KeyboardEvent.repeat parameter. It is a Readonly property. This value returns true if the key is being held down for longer durations such that it is automatically repeating.  Default value is false.
  • shift: Boolean This parameter is equivalent to the KeyboardEvent.shiftKey parameter. It is a Readonly property. This value returns true if the Shift key is active when the key is pressed.
  • control: Boolean This parameter is equivalent to the KeyboardEvent.controlKey parameter. It is a Readonly property. This value returns true if the Ctrl key is active when the key is pressed. Default value is false.
  • alt: Boolean This parameter is equivalent to the KeyboardEvent.altKey parameter. It is a Readonly property. This value returns true if the Alt key on Windows and Linux is active when the key is pressed (Equivalent to the Options key on macOS).Default value is false.
  • meta: Boolean This parameter is equivalent to the KeyboardEvent.metaKey parameter. It is a Readonly property. This value returns true if the windows key on Windows and Linux is active when the key is pressed (Equivalent to the Command key on macOS). Default value is false.

To get the current BrowserWindow Instance in the Renderer Process, we can use some of the Static Methods provided by the BrowserWindow object. 

• BrowserWindow.getAllWindows(): This method returns an Array of active/opened BrowserWindow Instances. In this application, we have only one active BrowserWindow Instance and it can be directly referred from the Array as shown in the code.
• BrowserWindow.getFocusedWindow(): This method returns the BrowserWindow Instance which is focused in the Application. If no current BrowserWindow Instance is found, it returns null. In this application, we only have one active BrowserWindow Instance and it can be directly referred using this method as shown in the code. 

Output: At this point, we should be able to successfully trigger the KeyboardEvents in Electron.