键盘事件

用户在使用键盘时会触发键盘事件。

键盘事件:

  • keydown:当用户按下键盘上的任意时触发,而且如果按住不放的话,会重复触发此事件
  • keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件
  • keyup:当用户释放键盘上的键时触发

文本事件:

  • textInput:在文本插入文本框之前会触发 textInput 事件

程序:

当用户按下一个键盘上的字符键:keydown -> keypress -> keyup

当用户按下一个键盘上的非字符键:keydown -> keyup

键码

在发生 keydownkeyup 事件时,event 对象的 keycode 属性中会包含一个代码,与键盘上一个特定的键对应。对数字字母字符键,keycode 属性的值与 ASCII 码对应小写字母或数字的编码相同。

键码键码
退格(Backspace)8数字小键盘 9105
制表(Tab)9数字小键盘+107
回车(Enter)13数字小键盘及大键盘上的-109
上档(Shift)16数字小键盘.110
控制(Ctrl)17数字小键盘/111
Alt18F1112
暂停/中断(Pause/Break)19F2113
大写(Caps Lock)20F3114
退出(Esc)27F4115
上翻页(Page Up)33F5116
下翻页(Page Down)34F6117
结尾(End)35F7118
开头(Home)36F8119
左箭头(Left Arrow)37F9120
上箭头(Up Arrow)38F10121
右箭头(Right Arrow)39F11122
下箭头(Down Arrow)40F12123
插入(Ins)45数字锁144
删除(Del)46滚动锁145
左 Windows 键91分号(E/Safari/Chrome)186
右 Windows 键91分号(Opera/Firefox)59
上下文菜单键93小于188
数字小键盘 096大于190
数字小键盘 197正斜杠191
数字小键盘 298沉音符192
数字小键盘 399等于61
数字小键盘 4100左方括号219
数字小键盘 5101反斜杠220
数字小键盘 6102右方括号221
数字小键盘 7103单引号222
数字小键盘 8104

字符编码

charCode 这个属性只有在发生 keypress 事件才包含值,而且这个值是按下的那个键所代表字符的 ASCⅡ 编码,此时的 keyCode 通常等于 0 或者也可能等于所按键的键码。

const EventUtil = {
// 省略的代码
getCharCode: function(event) {
if (typeof event.charCode == 'number') {
return event.charCode;
} else {
return event.keyCode;
}
},
};

这个方法首先检测 charCode 属性是否包含数值(在不支持这个属性的浏览器中,值为 undefined),如果是,则返回改值。否则,就返回 keyCode 属性值。

textInput 事件

当用户在可编辑区域中输入字符时,就会触发这个事件。这个用于替代 keypresstextInput 事件的行为稍有不同。区别之一就是任何可以获得焦点的元素都可以触发 keypress 事件,但只有可编辑区域才能触发 textInput 事件。区别之二是 textInput 事件只会在用户按下能够输入实际字符的键时才会被触发,而 keypress 事件则在按下那些能够影响文本显示的键时也会触发(例如退格键)。

由于 textInput 事件主要考虑的是字符,因此它的 event 对象中还包含一个 deta 属性,这个属性的值就是用户输入的字符(而非字符编码)。换句话说,用户在没有按上档键的情况下按下了 S 键,data 的值就是 "s",而如果在按住上档键时按下该键,data 的值就是 "S"

设备中的键盘事件

任天堂 Wii 会在用户按下 Wii 遥控器上的按键时触发键盘事件。尽管没有办法访问 Wii 遥控器中的所有按键,但还是有一些键可以触发键盘事件。

当用户按下十字键盘(键码为 175 ~ 178)、减号(170)、加号(174)、1(172)或 2(173)键时就会触发键盘事件。但没有办法得知用户是否按下了电源开关、A、B 或主页键。

iOS 版 Safari 和 Android 版 Webkit 在使用屏幕键盘时会触发键盘事件。

删除

Backspace 和 Delete

const keycode = e.keycode;
if (keycode === 46 || keycode === 8) {
}

兼容 ctrl 和 command

if (!e.altKey && !e.shiftKey && e.keyCode === 75 && (e.metaKey || e.ctrlKey)) {
console.log('ctrl+k 或者 command+k ');
}