js/jquery的键盘事件分为keypress、keydown和keyup事件

一.键盘事件

1.keydown()事件

当按钮被按下时，发生 keydown 事件。

2.keypress()事件

keypress 当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。

3.keyup事件

keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件

二.键盘对应的keycode大全

字母和数字键的键码值(keyCode)

按键 键码 按键 键码 按键 键码 按键 键码

A 65 J 74 S 83 1 49

B 66 K 75 T 84 2 50

C 67 L 76 U 85 3 51

D 68 M 77 V 86 4 52

E 69 N 78 W 87 5 53

F 70 O 79 X 88 6 54

G 71 P 80 Y 89 7 55

H 72 Q 81 Z 90 8 56

I 73 R 82 0 48 9 57

数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)

按键 键码 按键 键码 按键 键码 按键 键码

0 96 8 104 F1 112 F7 118

1 97 9 105 F2 113 F8 119

2 98 * 106 F3 114 F9 120

3 99 + 107 F4 115 F10 121

4 100 Enter 108 F5 116 F11 122

5 101 - 109 F6 117 F12 123

6 102 . 110  

7 103 / 111  

控制键键码值(keyCode)

按键 键码 按键 键码 按键 键码 按键 键码

BackSpace 8 Esc 27 Right Arrow 39 -_ 189

Tab 9 Spacebar 32 Down Arrow 40 .> 190

Clear 12 Page Up 33 Insert 45 /? 191

Enter 13 Page Down 34 Delete 46 `~ 192

Shift 16 End 35 Num Lock 144 [{ 219

Control 17 Home 36 ;: 186 /| 220

Alt 18 Left Arrow 37 =+ 187 ]} 221

Cape Lock 20 Up A

shortcuts.js支持单独按键和组合按键，同时可以通过配置是组合按键在输入框内失效。

3.组合按键

常见组合按键类型：

单独的按键操作，如：delete、up、down等

两位组合建，如：ctrl（cmd）+ 其他按键，alt+其他按键，shift+其他按键

三位组合键，如：ctrl（cmd）+ shift + 其他按键，Ctrl（cmd）+ alt + 其他按键

上面这三种情况， 都要处理的一个关键问题是阻止默认行为：比如删除按键，保存网页按键，保存书签等等，这些网页上的默认行为都需要阻止掉。另外一个就是监听按键，然后根据自己的需求，处理相应的事件。

步骤：

第一阻止默认事件，在W3C标准和IE下，处理方式不太一致。分别是执行event.preventDefault()方法和将event.returnValue = false属性。当然如果你使用的jQuery等类库的话，只需要写一个event.preventDefault()就可以了，它帮你做到了兼容。

第二监听按键类型，按键分两种情况，一种是单独按键（只有一个键），一种是组合键（两个以上按键）。单独按键需要监听事件的keyCode、charCode和which属性。

当然使用了jQuery也不用担心兼容问题了，直接使用event.keyCode即可。那怎么知道用户使用了组合键呢？

我们看到事件还有这么几个属性：ctrlKey（metaKey）、altKey、shiftKey，当你同时按下组合键的时候，这几个属性会变成true，所以组合键就可以通过监听按键code和这几个属性的状态进行判断了。

举一个简单的例子，js监听ctrl（cmd）+ s事件：

document.onkeydown = function(event) {
    var keyCode = event.keyCode || event.which || event.charCode;
    var ctrlKey = event.ctrlKey || event.metaKey;
    if(ctrlKey && keyCode === 83) {
        event.preventDefault();
        alert('save');
    }
    // event.preventDefault();
    // 注意：阻止默认事件不能放在外面，会阻止浏览器或者input/textarea的默认事件，应该放在相应的按键组合中去阻止
    return false;
};

// ctrl+s
/*
 if(event.ctrlKey == true && event.keyCode == 83) {
 console.log('触发ctrl+s 保存按钮');
 //保存表单
 alert('ctrl+s');
 event.preventDefault(); // 或者 return false;
 }
*/




//
// document.onkeydown = function() {
//     //判断 Ctrl+S
//     if(event.ctrlKey == true && event.keyCode == 83) {
//         alert('触发ctrl+s');
//         event.preventDefault(); // 或者 return false;
//     }
// }