键盘事件

一、键盘事件类型

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

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

注:在目前(2016)的 W3C 规范里,keypress 已经被标记为 Deprecated

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

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

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

  • keydowne.codee.whiche.keyCode 已废弃)
  • keypresse.keye.charCodee.keyCode 已废弃)
  • keyupe.codee.whiche.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,没有 charCodewhich

举例,按下键盘上的 A 键时,charCode97,对应小写字母 a。同时按下 ShiftA 键时,charCode65,对应大写字母 A。

keydownkeyup 事件中,charCode 恒为 0。

注:在目前(2016)的规范里,charCode 已经被标记为 Deprecated ,请使用 key 代替。

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

2.3 新的字符码属性 —— key

对应按键表示的字符。

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

其他系统按键的 key 是它们的键名。如:ArrowDownCapsLockF1TabEnterControlMetaEscape

注:Safari 暂不支持 key 属性。

2.4 已废弃的键码属性 —— keyCodewhich

对应键盘按键的位置。用于监听可打印字符以外的按键(如:Esc、F1-F12、方向键)被按下,需要依赖 keydownkeyup 事件。

如果被按下的是 字母、数字键(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

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

可打印字符对应的 codeKeyADigit1EqualSpace 等。

其他系统按键对应的 codeControlLeftAltRight 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 项目作为快捷键使用。

五、参考链接