简介
@wordpress/keyboard-shortcuts 是 WordPress 团队在 NPM 上发布的一个 npm 包，用于在 JavaScript 代码中实现键盘快捷键功能。它支持单个按键、组合键，以及支持多种键盘布局。
在前端应用开发中，键盘快捷键是一种常见的交互方式。使用 @wordpress/keyboard-shortcuts 可以提高应用的用户体验和效率。
安装
可以通过 npm 进行安装，在项目目录下运行以下命令：
npm install @wordpress/keyboard-shortcuts
使用
基础用法
import { registerShortcut } from '@wordpress/keyboard-shortcuts';
registerShortcut( 'ctrl+a', {
onMatch: () => {
console.log( '快捷键被触发' );
},
} );以上代码注册了一个快捷键 ctrl+a，当用户按下 ctrl+a 时会触发 onMatch 回调函数，并输出 "快捷键被触发"。
按键支持
@wordpress/keyboard-shortcuts 支持所有常见的单个按键和组合键，可以通过以下方式进行配置：
key: 指定一个按键，例如 a、↑、F12 等shiftKey: 指定是否按下shift键ctrlKey: 指定是否按下ctrl键altKey: 指定是否按下alt键metaKey: 指定是否按下meta键
-- -------------------- ---- -------
------ - ---------------- - ---- --------------------------------
----------------- --------- -
-------- -- -- -
------------ -------- --
--
- --
----------------- --------------- -
-------- -- -- -
------------ -------------- --
--
- --
----------------- ------ -
-------- -- -- -
------------ ----- --
--
- --以上代码分别注册了三个快捷键：
ctrl+a: 当用户按下
ctrl+a时，控制台输出 "ctrl+a"ctrl+shift+m: 当用户按下
ctrl和shift和m键时，控制台输出 "ctrl+shift+m"F12: 当用户按下
F12键时，控制台输出 "F12"
多种键盘布局支持
由于不同国家和地区使用的键盘布局不同，因此要想让应用支持多种键盘布局，则需要使用 @wordpress/keyboard-shortcuts 中提供的 shortcutFromEvent 函数。
例如，在美式键盘上，ctrl 和 alt 键是分开的，但在德式键盘上，它们是合在一起的。于是我们可以使用以下代码来支持多种键盘布局：
-- -------------------- ---- -------
------ - ----------------- ----------------- - ---- --------------------------------
----------------- --------- -
-------- -- -- -
------------ -------- --
--
- --
-------------------------- ---------- - ----- - -- -
----- -------- - ------------------ ----- --
-- - -------- --- -------- - -
------------ ---- ------ -- --
-
- --以上代码注册了一个快捷键 ctrl+a，并监听了 keydown 事件。当用户按下的键被解析为 ctrl+a 时，控制台将输出 "按下了 ctrl+a 键"。
其他
还有其他的 API 和配置项，可以在官网上查看 API 文档，并结合实际需求进行使用。
总结
@wordpress/keyboard-shortcuts 是一款非常实用的 NPM 包，可以帮助我们轻松地实现键盘快捷键功能。希望大家在前端应用开发中能够有效地使用它，并提高应用的用户体验和效率。
示例代码
下面是一个使用 @wordpress/keyboard-shortcuts 实现的应用内搜索功能：
-- -------------------- ---- -------
------ - ---------------- - ---- --------------------------------
----- ----- - ----------------------- ---------------------- --
--- -------------- - ------
----------------- --------- -
------ --------
-------- - - ----- - - -- -
-- - -------------- - -
-------
-
-------------- - -----
--------------
-----------------------
--
- --
----------------------- ------- -- -- -
-------------- - ------
- --来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2e24733b0ab45f74a8bc25