键盘事件

一、键盘事件类型

keydown：用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。
keypress：用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。
keyup：用户放开任何先前按下的键盘键时发生。

响应顺序：keydown -> keypress -> keyup

注：在目前（2016）的 W3C 规范里，keypress 已经被标记为 Deprecated。

二、键盘事件中的字符码和键码属性

2.1 获取键盘事件的字符码和键码

键盘事件以及可以获取的属性：

keydown：e.code（e.which 和 e.keyCode 已废弃）
keypress：e.key（e.charCode 和 e.keyCode 已废弃）
keyup：e.code（e.which 和 e.keyCode 已废弃）

要获取用户输入的字符：

过去：在 keypress 事件中，获取 e.charCode 或者 e.keyCode，使用 String.fromCharCode() 转换成字符。
现在：在 keydown 事件中，获取 e.key。

要获取用户按下的按键：

过去：在 keydown 事件中，获取 e.which 或者 e.keyCode。
现在：在 keydown 事件中，获取 e.code。

2.2 已废弃的字符码属性 —— `charCode`

对应 keypress 事件，支持键盘上所有数字、字母、英文标点（character key）。

这些按键的 charCode 实际上就是其按键字符的 ASCII 码，可以通过 String.fromCharCode() 转换成对应的字符。所以，通过监听 keypress 事件，可以获得用户输入的字符。

注：回车键也可以在 keypress 事件中捕获，有 charCode 值。早期的 IE 版本，只有 keyCode，没有 charCode 和 which 。

举例，按下键盘上的 A 键时，charCode 为 97，对应小写字母 a。同时按下 Shift 和 A 键时，charCode 为 65，对应大写字母 A。

在 keydown 和 keyup 事件中，charCode 恒为 0。

注：在目前（2016）的规范里，charCode 已经被标记为 Deprecated ，请使用 key 代替。

// 获取可打印的字符码
function getCharCode(event) {
  var e = event || window.event;
  return e.charCode || e.keyCode;
}

2.3 新的字符码属性 —— `key`

对应按键表示的字符。

可打印按键的 key 就是它们表示的字符，包括数字、大小写字母、英文标点（空格是）。

其他系统按键的 key 是它们的键名。如：ArrowDown、CapsLock、F1、Tab、Enter、Control、Meta、Escape。

注：Safari 暂不支持 key 属性。

2.4 已废弃的键码属性 —— `keyCode` 和 `which`

对应键盘按键的位置。用于监听可打印字符以外的按键（如：Esc、F1-F12、方向键）被按下，需要依赖 keydown 和 keyup 事件。

如果被按下的是 字母、数字键（alphanumeric key），则返回 character code；否则（non-alphanumeric key）返回 key code。

如果按下的是 英文标点键 ，不同浏览器的处理不同。在 Firefox 和 Opera 中，分号键的 keyCode 值为 59，也就是 ASCII 中分号的编码；而 IE / Safari / Chrome 返回 186，即键盘中按键的键码。所以：

文字输入，只关心字符码，不关心键码，应该在 keypress 事件中处理。
快捷键之类的应用场景，只关心键码，不关心字符码，应该在 keydown 事件中处理。

IE8 及其更早版本只支持keyCode，不支持 which 属性。早期的 Firefox，除功能键外，其他 keyCode 始终为 0。

注：数字键 0-9、字母键 A-Z（大写）的 keyCode 恰好对应 ASCII 值。在目前（2016）的规范里，keyCode 已经被标记为 Deprecated ，请使用 code 代替。

// 获取键盘码
function getKeyCode(event) {
  var e = event || window.event;
  return e.which || e.keyCode;
}

2.5 新的键码属性 —— `code`

对应键盘上的实际按键，区分位置。

可打印字符对应的 code 如 KeyA、Digit1、Equal、Space 等。

其他系统按键对应的 code 如 ControlLeft 、AltRight NumpadDecimal 等。

注：Safari 暂不支持 code 属性。

三、键盘事件的其他属性

3.1 类型

e.type: 即 keydown/keypress/keyup

3.2 修饰键

按下时，值为 true，否则为 false。

e.altKey: alt key (Option or ⌥ on macOS)
e.ctrlKey: control key
e.shiftKey: shift key
e.metaKey: meta key (⊞ Windows or ⌘ Command/Cmd key)

3.3 其他

e.location
e.char (仅 IE/Edge 有)

四、浏览器中不能捕获的组合键

以下是一些被 Chrome 浏览器占用的快捷键，无法在 JS 中进行捕获。

Ctrl + N 新建窗口
Ctrl + T 新建标签页
Ctrl + W 关闭标签页
Ctrl + Shift + N 新建无痕窗口
Ctrl + Shift + T 重新打开关闭的标签页
Ctrl + Shift + W 关闭窗口
Alt + F4 关闭浏览器

不能捕获也就意味着无法阻止默认动作，不能被 Web 项目作为快捷键使用。

五、参考链接

KeyboardEvent - MDN