npm 包 @polymer/iron-a11y-keys-behavior 使用教程

阅读时长 6 分钟读完

前言

网站在开发的过程中,用户的键盘交互是一项十分重要的因素。对于体验良好的网站来说,键盘交互功能必须实现。而通过 npm 包 @polymer/iron-a11y-keys-behavior,可以帮助开发者非常方便地实现键盘交互功能。本文将为各位读者介绍如何使用该 npm 包。

安装 @polymer/iron-a11y-keys-behavior

使用 @polymer/iron-a11y-keys-behavior,需要先安装该 npm 包。安装可以通过以下命令进行:

使用 @polymer/iron-a11y-keys-behavior

安装完后,在代码中引入该 npm 包:

接着就可以将该包应用于任何 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

纠错
反馈