Eventos de teclado en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows , macOS y Linux . Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

En el desarrollo web, los eventos de teclado jQuery proporcionan una forma conveniente mediante la cual podemos registrar las pulsaciones de teclas del teclado en un orden secuencial. Estos eventos incluyen combinaciones de teclas, teclas especiales y modificadores, y se activan tan pronto como la tecla desciende, se presiona y se suelta. Estos eventos son muy importantes en caso de que queramos rastrear o activar alguna funcionalidad en ciertas pulsaciones de teclas. Además de proporcionar Aceleradores y el módulo globalShortcut , Electron también nos brinda una forma en la que podemos registrar los eventos del teclado utilizando los métodos de instancia y el evento del objeto BrowserWindow incorporado y el contenido web.propiedad. Este tutorial demostrará los eventos de teclado en Electron. 

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

• Estructura del proyecto: 

Ejemplo: siga los pasos indicados en Cómo encontrar texto en una página en ElectronJS para configurar la aplicación electrónica básica. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Realice también los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos. 
 

paquete.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"
  }
}

Salida: en este punto, nuestra aplicación electrónica básica está configurada. Al iniciar la aplicación, deberíamos ver el siguiente resultado
 

Eventos de teclado en Electron: la instancia de BrowserWindow y la propiedad webContents son parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo  remoto Electron .

index.html : agregue el siguiente fragmento en ese archivo. 

<h3>Key Events in Electron</h3>

index.js : agregue el siguiente fragmento en ese archivo. 
 

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

El evento de entrada anterior de la propiedad webContents funciona en estrecha colaboración con la API web KeyboardEvent . KeyboardEvent describe una interacción del usuario con el teclado. Hereda el método Instancia y las propiedades del UIEvent y el objeto Evento global . El evento de instancia before-input-event se emite antes de enviar los eventos keydown y keyup del KeyboardEvent en la página web. Este evento de instancia aprovecha el constructor del objeto KeyboardEvent . Devuelve los siguientes parámetros. 

• evento: El objeto Evento global.
• entrada: Objeto Contiene los siguientes parámetros.
  • type: String Este parámetro define el tipo de KeyboardEvent que ha ocurrido. Los valores pueden ser keyUp o keyDown . El evento before-input-event no admite el evento keyPressed , ya que ha quedado obsoleto en la propia API web KeyboardEvent .
  • key: String Este parámetro es equivalente al parámetro KeyboardEvent.key . Es una propiedad de solo lectura . Este valor devuelve un DOMString que representa el valor clave de la tecla presionada. 
  • código: String Este parámetro es equivalente al parámetro KeyboardEvent.code . Es una propiedad de solo lectura . Este valor devuelve un DOMString con el valor del código de la tecla presionada. 
  • isAutoRepeat: Boolean Este parámetro es equivalente al parámetro KeyboardEvent.repeat . Es una propiedad de solo lectura . Este valor devuelve verdadero si la tecla se mantiene presionada durante más tiempo, de modo que se repite automáticamente. El valor predeterminado es falso .
  • shift: booleano Este parámetro es equivalente al parámetro KeyboardEvent.shiftKey . Es una propiedad de solo lectura . Este valor devuelve verdadero si la tecla Mayús está activa cuando se presiona la tecla.
  • control: booleano Este parámetro es equivalente al parámetro KeyboardEvent.controlKey . Es una propiedad de solo lectura . Este valor devuelve verdadero si la tecla Ctrl está activa cuando se presiona la tecla. El valor predeterminado es falso .
  • alt: booleano Este parámetro es equivalente al parámetro KeyboardEvent.altKey . Es una propiedad de solo lectura . Este valor devuelve verdadero si la tecla Alt en Windows y Linux está activa cuando se presiona la tecla (equivalente a la tecla Opciones en macOS). El valor predeterminado es falso .
  • meta: booleano Este parámetro es equivalente al parámetro KeyboardEvent.metaKey . Es una propiedad de solo lectura . Este valor devuelve verdadero si la tecla de Windows en Windows y Linux está activa cuando se presiona la tecla (equivalente a la tecla Comando en macOS ). El valor predeterminado es falso .

Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos de los métodos estáticos proporcionados por el objeto BrowserWindow . 

• BrowserWindow.getAllWindows(): este método devuelve una array de instancias de BrowserWindow activas/abiertas. En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede consultar directamente desde el arreglo, como se muestra en el código.
• BrowserWindow.getFocusedWindow(): este método devuelve la instancia de BrowserWindow que está enfocada en la aplicación. Si no se encuentra ninguna instancia de BrowserWindow actual, devuelve nulo . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente mediante este método, como se muestra en el código. 

Salida: en este punto, deberíamos poder activar con éxito KeyboardEvents en Electron.