介绍
开发前端应用的过程中，我们经常会用到键盘事件（keyboard events）来监听用户的输入行为。但是，由于浏览器的差异性，不同浏览器对键盘事件键码（key code）的定义不同，给我们带来很多麻烦。而 shim-keyboard-event-key 这个 npm 包就是用来解决这个问题的。
shim-keyboard-event-key 能够将不同浏览器中键盘事件对应的键码转化为标准的键名（key name），使开发者能够更方便的监听键盘事件。它支持多种浏览器，如 Chrome、Firefox、IE、Safari 等，并且支持常用的键盘事件，如 "keydown"、"keyup" 等。
在本教程中，我们将介绍 shim-keyboard-event-key 的安装和使用方法，并分别展示它在 Chrome 和 Safari 上的运行效果。
安装
你可以通过 npm 来安装 shim-keyboard-event-key：
--- ------- -----------------------
安装完成后，在你的代码中引入 shim-keyboard-event-key：
------ -------------------- ---- --------------------------
使用方法
我们来看一下如何使用 shim-keyboard-event-key 来监听键盘事件。
监听 keydown 事件
在监听 keydown 事件时，你需要传入一个 event 对象作为参数（这个参数可以是任何名字）来接收事件的信息。在 shim-keyboard-event-key 中，你可以使用 event.key 来代替 event.keyCode，这样可以将不同浏览器返回的键码转化为标准的键名。
------------------------------------ ------- -- - ----------------------- -- --------- ---
监听 keyup 事件
监听 keyup 事件的方法和监听 keydown 事件的方法类似，你同样需要传入一个 event 对象作为参数来接收事件的信息。
---------------------------------- ------- -- - ----------------------- -- ---------- ---
示例代码
下面我们来展示在 Chrome 和 Safari 上使用 shim-keyboard-event-key 的效果。在这个示例中，我们监听用户的 A 键和 D 键输入事件。
--------- -----
------
------
----- ----------------
------------------------------ ----------
-------
------
----- - -- - ------
------- --------------
------ -------------------- ---- --------------------------
------------------------------------ ------- -- -
-- ---------- --- --- -- --------- --- ---- -
----------------- - ----
- ---- -- ---------- --- --- -- --------- --- ---- -
----------------- - ----
- ---- -
-----------------------
-
---
---------
-------
-------在 Chrome 浏览器中，按下 A 键和 D 键会输出以下内容：
---- - - ---- - -
在 Safari 浏览器中，按下 A 键和 D 键会输出以下内容：
---- - - ---- - -
可以看到，使用 shim-keyboard-event-key 能够很好地统一不同浏览器中键盘事件对应的键码，让我们在前端开发中更加便捷。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f40afc2dbf7be33b2567233