Electron 监听键盘事件：在 Electron 应用中轻松实现按键操控

2022-12-12 02:17:43

聆听键盘：赋予 Electron 应用交互式力量

概述

Electron 框架让开发者能够运用 JavaScript、HTML 和 CSS 构建出跨平台且功能齐全的桌面应用程序。在 Electron 应用中，监听键盘事件可谓实现交互式功能的基石。通过监测键盘输入，我们可以赋予用户通过键盘按键控制应用程序行为的能力，诸如使用上下键浏览列表数据或左右键切换页面。

监听键盘事件

Electron 中的键盘事件监听十分简便，主要有 keydown、keyup 和 keypress 三种事件。

keydown：在按键按下时触发。
keyup：在按键松开时触发。
keypress：在按键按下并松开时触发。

这三种事件均可通过 addEventListener() 方法进行监听，语法如下：

element.addEventListener('keydown', function(event) {
  // 处理键盘事件
});

其中 element 为需要监听键盘事件的元素，function(event) 为在键盘事件触发时要执行的函数。

示例：键盘导航

上下键切换列表数据

在 Electron 应用中，我们可以通过上下键在列表中切换数据。具体步骤如下：

创建一个列表元素，并添加 keydown 事件监听器。
在事件监听器中，判断按键是否为上键或下键。
根据按键，移动列表中当前选中的项。
更新列表显示以反映新的选中项。

const list = document.getElementById('list');

list.addEventListener('keydown', function(event) {
  const key = event.key;

  if (key === 'ArrowUp') {
    // 上键：移动到上一项
    const selectedItem = list.querySelector('.selected');
    if (selectedItem && selectedItem.previousElementSibling) {
      selectedItem.classList.remove('selected');
      selectedItem.previousElementSibling.classList.add('selected');
    }
  } else if (key === 'ArrowDown') {
    // 下键：移动到下一项
    const selectedItem = list.querySelector('.selected');
    if (selectedItem && selectedItem.nextElementSibling) {
      selectedItem.classList.remove('selected');
      selectedItem.nextElementSibling.classList.add('selected');
    }
  }
});

左右键实现列表数据翻页

类似地，我们也可以使用左右键来翻页。步骤如下：

创建一个列表元素，并添加 keydown 事件监听器。
在事件监听器中，判断按键是否为左键或右键。
根据按键，切换列表的当前页码。
更新列表显示以反映新的页码。

const list = document.getElementById('list');

list.addEventListener('keydown', function(event) {
  const key = event.key;

  if (key === 'ArrowLeft') {
    // 左键：切换到上一页
    const currentPage = parseInt(list.getAttribute('data-current-page'));
    if (currentPage > 1) {
      list.setAttribute('data-current-page', currentPage - 1);
      updateList(currentPage - 1);
    }
  } else if (key === 'ArrowRight') {
    // 右键：切换到下一页
    const currentPage = parseInt(list.getAttribute('data-current-page'));
    const totalPages = parseInt(list.getAttribute('data-total-pages'));
    if (currentPage < totalPages) {
      list.setAttribute('data-current-page', currentPage + 1);
      updateList(currentPage + 1);
    }
  }
});

function updateList(page) {
  // 更新列表显示
}