前言
网站在开发的过程中，用户的键盘交互是一项十分重要的因素。对于体验良好的网站来说，键盘交互功能必须实现。而通过 npm 包 @polymer/iron-a11y-keys-behavior，可以帮助开发者非常方便地实现键盘交互功能。本文将为各位读者介绍如何使用该 npm 包。
安装 @polymer/iron-a11y-keys-behavior
使用 @polymer/iron-a11y-keys-behavior，需要先安装该 npm 包。安装可以通过以下命令进行：
npm install --save @polymer/iron-a11y-keys-behavior
使用 @polymer/iron-a11y-keys-behavior
安装完后，在代码中引入该 npm 包：
import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior'接着就可以将该包应用于任何 Polymer 元素。使用该包的方式非常简单，只需在 Polymer 元素引用时加入 behaviors 属性，设置值为 IronA11yKeysBehavior 即可：
-- -------------------- ---- -------
------ ---------------- ---- --------------------------------------
------ ---------------------- ---- -----------------------------------
----- --------- ------- -------------- -
------ --- ----------- -
------ -
---------------------
-- ----- ---------
-
-
------------- -
-------- ----------
-
---------- -
------------------ --- ----------
-
-在上述例子中，Polymer 元素 MyElement 引用了 IronA11yKeysBehavior 包。同时定义了一个 _keyBindings 对象，其中声明了一个 'enter' 键与对应的函数 _onEnter。
此时在网页中，当用户按下 enter 键时，会触发 _onEnter 函数，从而打印 enter key pressed。
深入了解 @polymer/iron-a11y-keys-behavior
@polymer/iron-a11y-keys-behavior 可以帮助我们方便地实现键盘交互功能，下面分析一下其内部实现。
_createKeymap
这是一个将键名转化为键码的函数，并将键码存储在 _keycodes 对象中。
-- -------------------- ---- -------
-------------------------- -
--- --- - ---
--- ---- ------------- -- ------------ -
--- ------- - -------------------------
--- ----------- - -----------
--- --------- - -----------
--- --------
-- ---------------------------- -- -- -
------- - ---
--------- - --------------------------- ----
-
-- ----------------- - -- -
------------------ -------- ------- ---- -------- ------- ------ ------- --- ------ --------- ----- ------ -----------
---------
-
------- - ------- -- --------------------------------------
---------------- - --------
-
-------------- - ----
-_keydownHandler
该函数是在用户按下键盘键时触发。
-- -------------------- ---- -------
---------------------- -
-- ------------- -- ----------------------------------- --- --- -
-------
-
--- --- - ---------------------
-- ----- -
--------------------- -------
-
-这里会检查是否有需要被忽略的键。如果该键已被设置为不响应，则退出函数。如果该键没有设置为忽略，则通过 _findKey 函数查找该键是否在 _keycodes 中。若在，则通过 _triggerKey 函数触发相应函数。
_findKey
该函数用于查找当前按下的键是否在 _keycodes 中。
-- -------------------- ---- -------
--------------- -
--- --------- - ---
-- ---------------- -
--------- -- ---------
-
-- --------------- -
--------- -- --------
-
-- -------------- -
--------- -- -------
-
-- --------------- -
--------- -- --------
-
--- --- - ----------------------------------- -- -------------------------------------------------
-- ---------- -- ---------- -- -- -
------ --------- - ----
- ---- -
------ ----
-
-该函数会获取按下的键的键码，并根据是否按下了 shift、ctrl、alt、meta 等键，组合键名。比如当同时按下 shift 和 enter 时，_findKey 返回的键值为 shift+enter。
_triggerKey
该函数用于触发指定键名对应的函数。
-- -------------------- ---- -------
---------------- ------ -
--- -- - -----------------------
-- ------- -- --- --------- -
-- - ---------
-
-- ---- -
------ ------------- ------ -----
-
-传入一个键名 key，该函数会查找 _keyBindings 中该键名对应的函数，并触发该函数。
总结
在本文中，我们介绍了如何使用 npm 包 @polymer/iron-a11y-keys-behavior 实现键盘交互功能。该包在内部实现上通过将键名转化为键码，再触发相应函数，实现了键盘交互功能。同时，该包提供了忽略指定键的功能。
在实际开发中，通过使用该包，我们可以帮助用户通过键盘操作更好地使用网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f756127a9b7065299ccbcbc