在之前的几个 Chrome 版本中，KeyboardEvent 新增了两项，均用作传递给 keydown、keypress 和 keyup 事件监听器的参数。code 属性（已添加到 Chrome 48 中）和 key 属性（已添加到 Chrome 51 中）都让开发者可以轻松获取使用旧版属性难以获取的信息。
代码属性
首先是 code 属性。此属性设置为一个字符串，表示为生成 KeyboardEvent 所按下的键，而不考虑当前键盘布局（例如 QWERTY 与 Dvorak）、语言区域（例如，英语与法语）或任何辅助键。
当您要关心按下的是哪个实体键（而不是它对应的字符）时，这非常有用。例如，如果您编写游戏，则可能需要使用一组特定按键向不同方向移动玩家，并且该映射在理想情况下应独立于键盘布局。
key 属性
接下来，我们有新的 key 属性。该键也被设置为一个字符串，但是 code 会返回有关所按下的实体键的信息，而 key 包含该键生成的字符，考虑了当前的键盘布局、语言区域和辅助键。
当您需要了解当用户输入文本输入内容时，屏幕上将会显示什么字符时，查看 key 属性的值会很有帮助。
这在实践中意味着什么？
举一个具体的例子：假设您的用户使用的是采用 QWERTY 键盘布局的美式键盘。按该键盘上的实体 Q 键会生成一个 KeyboardEvent，其 code 属性设置为 "KeyQ"。无论键盘布局或任何其他辅助键如何，情况都是如此。为便于比较，在法语 (AZERTY) 键盘上，虽然键盘盖上印有的字母是“a”，但此键的 code 仍为 "KeyQ"。
按同一美国键盘上的实体 Q 键通常会生成一个 KeyboardEvent，并将 key 设置为 "q"（不使用辅助键）、"Q"（使用 Shift 或 CapsLock）或 "œ"（在 OS X 上，使用 Alt）。在法语 AZERTY 键盘上，此键会生成一个“a”（或者，如果使用 Shift 或 CapsLock 键会生成一个“A”）。对于其他键盘布局，key 值可以是 "й"、"ض"、"ㅂ"、"た" 或其他一些字符。回顾之前的游戏示例，如果您希望游戏使用 WASD 键进行移动，可以使用 code 属性并检查 "KeyW"、"KeyA"、"KeyS" 和 "KeyD"。这适用于所有键盘和所有布局，甚至包括可交换“w”键和“z”键位置的 AZERTY 键盘。
虚拟键盘
您会注意到，到目前为止，我们一直关注的是使用实体键盘时的行为。如果用户使用虚拟键盘或其他输入设备输入内容，又会怎样？该规范为 code 属性提供了官方指导。总而言之，模仿标准键盘布局的虚拟键盘预计会设置适当的 code 属性，但采用非传统布局的虚拟键盘可能会导致 code 完全未设置。
key 属性的操作更简单，此属性应根据用户（虚拟）输入的字符设置为字符串。
试试看
Gary Kačmarčík 制作了一个精彩的演示，用于直观呈现与 KeyboardEvent 关联的所有属性：
跨浏览器支持
截至撰写本文时，对 code 属性的支持仅限于 Chrome 48+、Opera 35+ 和 Firefox 44+。Firefox 44+、Chrome 51+ 和 Opera 38+ 支持 key 属性，在 Internet Explorer 9+ 和 Edge 13 及更高版本中部分支持。