介绍
ember-keyboard 是一个适用于 Ember.js 应用程序的 npm 包，用于处理键盘事件、快捷键和可自定义的键绑定。它对于让用户更加高效和方便地使用您的应用程序非常有用。
安装
您可以使用 npm 包管理器来安装 ember-keyboard：
$ npm install ember-keyboard --save-dev
一旦安装完成，您需要在 ember-cli-build.js 文件中添加以下行：
-- -------------------- ---- -------
-- ------------------
--- --- - --- ------------------ -
-- ---
------------ -
-------- --------------
-
---
-----------------------------------------------------------------请确保将上面的 exclude 行添加到你的 EmberApp 配置对象中，以便 ember-keyboard 包不会被指纹处理。
使用示例
基础用法
您可以使用 keyboardActivated 和 keyboardDeactivated 生命周期钩子来在您的控制器中激活和禁用键盘事件。此外，您可以使用 onKey 方法来到达键盘事件，并使用 keyboardHandlers 属性来定义其他键盘处理器。
-- -------------------- ---- -------
-- --------------------------------
------ ---------- ---- --------------------
------ - ----- - ---- -----------------
------ ------- -------------------
------------------- -
------------------ -------- -- ------------
--
--------------------- -
------------------ -------- -- --------------
--
----------------- -
------------- -----------------
--
----------------- -
------------------- -------- ------- --- ------------
--
------------
--------- -
--------------- ----- --- ----------
-
---高级用法
定义自定的键绑定
您可以通过将自定义键绑定添加到 keyboardHandlers 属性中来为您的应用程序创建自定义快捷方式。以下是实现自定的键绑定的示例代码：
-- -------------------- ---- -------
-- --------------------------------
------ ---------- ---- --------------------
------ ------- -------------------
----------------- -
------------- -----------------
--
----------------- -
------------------- -------- ------- --- --------- ---- -------------
-
---使用 stopPropagation 来防止默认行为
如果您要使用 stopPropagation 防止默认行为，可以按以下方式定义您的键绑定处理器：
-- -------------------- ---- -------
-- --------------------------------
------ ---------- ---- --------------------
------ - --------------- - ---- -----------------
------ ------- -------------------
----------------- -
-------- ---------------
-
---捕获键盘事件
您可以使用 capture 选项来在捕获阶段捕获键盘事件：
-- -------------------- ---- -------
-- --------------------------------
------ ---------- ---- --------------------
------ - ----- - ---- -----------------
------ ------- -------------------
----------------- -
------------- -
-------- ------------------
-------- ----
-
--
----------------- -
------------------- -------- ------- --- --------- ---- ---------- -------------
--
------------ - -------- ---- --
--------- -
--------------- ----- --- ------- -------------
-
---默认键绑定
ember-keyboard 附带了一组默认键绑定，这些键绑定在 addon 目录下的 assets/ember-keyboard-defaults.js 中定义。以下是默认键绑定的完整列表：
| 键盘快捷键 | 描述 |
|---|---|
alt+up |
使用 alt+up 提升焦点。 |
alt+down |
使用 alt+down 降低焦点。 |
escape |
触发 escape 事件并取消任何开放状态或公开的弹出或可编辑区域。 |
shift+tab |
使用 shift+tab 在活动区域内向后提升焦点。 |
tab |
使用 tab 在活动区域内推进焦点。 |
ctrl+alt+z |
使用 ctrl+alt+z 以撤消任何正在进行的更改。 |
ctrl+a |
使用 ctrl+a 选中文本。 |
ctrl+c |
使用 ctrl+c 复制文本。 |
ctrl+f |
使用 ctrl+f 搜索。 |
ctrl+shift+z |
使用 ctrl+shift+z 以重做任何正在进行的更改。 |
ctrl+v |
使用 ctrl+v 粘贴文本。 |
ctrl+x |
使用 ctrl+x 剪切文本。 |
ctrl+z |
使用 ctrl+z 回退文本。 |
如果您想要禁用默认键绑定，请按以下方式在应用程序的配置中设置 keyboardConfig.disableDefaultHandlers 属性：
-- -------------------- ---- -------
-- ---------------------
-------------- - --------------------- -
--- --- - -
-- ---
--------------- -
----------------------- ----
-
--
-- ---
------ ----
--总结
ember-keyboard 是一个非常有用的 npm 包，可以方便地处理键盘事件、快捷键和自定义键绑定。使用它可以提高您的应用程序的效率和便利性。在您的 Ember.js 项目中使用它，就可以与用户进行更直接的交互，从而提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60006