JS keydown 键盘事件
简介
关于键盘事件，分为三种，其中keydown事件发生在键盘的键被按下的时候，接下来触发keypress事件，最后在按键被释放时触发keyup事件。
用法如下
document.addEventListener('keyup', function (e) {});
document.addEventListener('keypress', function (e) {});
document.addEventListener('keyup', function (e) {});
特殊按键如PrScrn键是不会被捕获到的，其他的键盘事件请注意：
keydown、keyup事件
- keydown触发后，不一定立即触发keyup，可以按下不松手持续一段时间得到多个keydown事件，或者当keydown按下后，拖动鼠标，那么将不会触发keyup事件。
- keydown和keyup区分小键盘和主键盘的数字字符，这两种输入得到的keyCode是不同的。
- keydown和keyup不区分单个字符大小写情况，这两种输入得到的keyCode是相同的。
keypress事件
- KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
- KeyPress 可以捕获单个字符的大小写，得到的keyCode值是符合ascii码表里对应的大小写字母值。
- KeyPress 不区分小键盘和主键盘的数字字符，得到的keyCode相同。
keydown和keyup的keyCode说明
- backspace：8
- tab：9
- enter：13
- shift：16
- ctrl：17
- alt：18
- pause/break：19
- caps lock：20
- escape：27
- page up：33
- Space：32
- page down：34
- end：35
- home：36
- arrow left：37
- arrow up：38
- arrow right：39
- arrow down：40
- insert：45
- delete：46
- 0：48
- 1：49
- 2：50
- 3：51
- 4：52
- 5：53
- 6：54
- 7：55
- 8：56
- 9：57
- a：65
- b：66
- c：67
- d：68
- e：69
- f：70
- g：71
- h：72
- i：73
- j：74
- k：75
- l：76
- m：77
- n：78
- o：79
- p：80
- q：81
- r：82
- s：83
- t：84
- u：85
- v：86
- w：87
- x：88
- y：89
- z：90
- left window key：91
- right window key：92
- select key：93
- numpad 0：96
- numpad 1：97
- numpad 2：98
- numpad 3：99
- numpad 4：100
- numpad 5：101
- numpad 6：102
- numpad 7：103
- numpad 8：104
- numpad 9：105
- multiply：106
- add：107
- subtract：109
- decimal point：110
- divide：111
- f1：112
- f2：113
- f3：114
- f4：115
- f5：116
- f6：117
- f7：118
- f8：119
- f9：120
- f10：121
注意keypress的按键keyCode和ascii码表值相同。
捕获正常的字母和数字
如果不希望匹配到如ctrl+c这样的组合键里的c，则需要使用keypress事件。
document.addEventListener('keypress', function (e) {
if (e.keyCode >= 48 && e.keyCode <= 57 ||
e.keyCode >= 65 && e.keyCode <= 90 ||
e.keyCode >= 97 && e.keyCode <= 122) {
console.log(e.keyCode);
}
});
捕获ctrl+c组合键
捕获组合键注意mac和windows的差异，控制键有以下四种，对应键盘事件event的以下四个属性
- ctrlKey --- Ctrl键
- shiftKey --- Shift键
- altKey --- Alt键
- metaKey --- command键（Mac下），此属性只能在mac中需要keydown事件才能得到正确的值。
document.addEventListener('keydown', function (e) {
if (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) {
console.log('ctrl + c');
}
}, false);
参考
http://www.cnblogs.com/manongxiaobing/archive/2012/11/05/2755412.html
