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