События клавиатуры в ElectronJS

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows , macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

В веб-разработке события клавиатуры jQuery обеспечивают удобный способ последовательной записи нажатий клавиш на клавиатуре. Эти события включают комбинации клавиш, специальные клавиши и модификаторы и запускаются, как только клавиша движется вниз, нажимается и отпускается. Эти события очень важны, если мы хотим отслеживать или запускать некоторые функции при нажатии определенных клавиш. В дополнение к ускорителям и модуль globalShortcut, Electron также предоставляют нам способ , с помощью которого мы можем записывать на события клавиатуры , используя методы экземпляра и события из встроенного объекта BrowserWindow и свойство webContents. В этом руководстве будут продемонстрированы события клавиатуры в Electron.

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

• Структура проекта:

Пример: следуйте инструкциям в разделе Как найти текст на странице в ElectronJS, чтобы настроить базовое приложение Electron. Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Также внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Основные шаги, необходимые для настройки приложения Electron, остаются прежними.

package.json:

 {
  "name": "электронный ключ",
  "версия": "1.0.0",
  "description": "Ключевые события в Электроне",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0"
  }
}

Вывод: На этом этапе настроено наше основное электронное приложение. После запуска приложения мы должны увидеть следующий результат

Клавиатура Событие Electron: The BrowserWindow Instance и webContents собственности является частью основного процесса. Чтобы импортировать и использовать BrowserWindow в процессе рендеринга, мы будем использовать удаленный модуль Electron.

index.html : добавьте в этот файл следующий фрагмент.

index.js : добавьте в этот файл следующий фрагмент.

Событие before-input свойства webContents тесно взаимодействует с веб-API KeyboardEvent. KeyboardEvent описывает взаимодействие пользователя с клавиатурой. Он наследует метод экземпляра и свойства UIEvent и глобального объекта Event. Событие экземпляра before-input-event генерируется перед отправкой событий keydown и keyup для KeyboardEvent на веб-странице. Это событие Instance использует конструктор объекта KeyboardEvent. Он возвращает следующие параметры.

• event: глобальный объект Event.
• input: Object Он содержит следующие параметры.
  • type: String Этот параметр определяет тип произошедшего KeyboardEvent . Значения могут быть либо keyUp, либо keyDown . Событие before-input-event не поддерживает событие keyPressed, поскольку оно устарело в самом веб-API KeyboardEvent.
  • key: String Этот параметр эквивалентен параметру KeyboardEvent.key. Это свойство только для чтения. Это значение возвращает DOMString, представляющую ключевое значение нажатой клавиши.
  • code: String Этот параметр эквивалентен параметру KeyboardEvent.code. Это свойство только для чтения. Это значение возвращает DOMString с кодовым значением нажатой клавиши.
  • isAutoRepeat: Boolean Этот параметр эквивалентен параметру KeyboardEvent.repeat. Это свойство только для чтения. Это значение возвращает истину, если клавиша удерживается более длительное время, так что она автоматически повторяется. Значение по умолчанию - false .
  • shift: Boolean Этот параметр эквивалентен параметру KeyboardEvent.shiftKey. Это свойство только для чтения. Это значение возвращает истину, если клавиша Shift активна при нажатии клавиши.
  • control: Boolean Этот параметр эквивалентен параметру KeyboardEvent.controlKey. Это свойство только для чтения. Это значение возвращает истину, если клавиша Ctrl активна при нажатии клавиши. Значение по умолчанию - false .
  • alt: Boolean Этот параметр эквивалентен параметру KeyboardEvent.altKey. Это свойство только для чтения. Это значение возвращает true, если клавиша Alt в Windows и Linux активна при нажатии клавиши (эквивалентно клавише Options в macOS). Значение по умолчанию - false .
  • meta: Boolean Этот параметр эквивалентен параметру KeyboardEvent.metaKey. Это свойство только для чтения. Это значение возвращает истину , если ключ окна на Windows , и Linux активен , когда нажата клавиша (Эквивалент клавиши Command на MacOS). Значение по умолчанию - false .

Чтобы получить текущий экземпляр BrowserWindow в процессе рендеринга, мы можем использовать некоторые статические методы, предоставляемые объектом BrowserWindow.

• BrowserWindow.getAllWindows (): этот метод возвращает массив активных / открытых экземпляров BrowserWindow. В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться из массива, как показано в коде.
• BrowserWindow.getFocusedWindow (): этот метод возвращает экземпляр BrowserWindow, который сфокусирован в приложении. Если текущий экземпляр BrowserWindow не найден, возвращается значение null . В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться с помощью этого метода, как показано в коде.

Вывод: На этом этапе мы должны иметь возможность успешно запускать KeyboardEvents в Electron.