js键盘响应事件代码的编写方法

如果我们需要在网页上使用键盘的某些键作为快捷键（比较典型的是收银台使用F1~F9），那么我们需要写网页的键盘响应事件。

如果要做到只要网页获取了鼠标焦点（鼠标滚轮滚动网页能上下滚动时就是获取焦点状态，否则不是），就可以响应键盘时间，那么我们只要针对document绑定鼠标事件即可。

但如果只是针对某个input或textarea响应键盘事件，那么要将键盘事件绑定到该dom元素上。绑定方法如下：

js原生：

 

	document.onkeydown = function(e) {
		var keyCode   = e.keyCode || e.which;
		var ctrlDown  = e.ctrlKey;
		var shiftDown = e.shiftKey;
		var altDown   = e.altKey;
		if (ctrlDown && keyCode == 13) {
			console.log('您按下了Ctrl+Enter键');
		}
	};

或者：

 

使用jquery：

 

	$(document).keydown(function(e) {
		var keyCode   = e.keyCode || e.which;
		var ctrlDown  = e.ctrlKey;
		var shiftDown = e.shiftKey;
		var altDown   = e.altKey;
		if (ctrlDown && keyCode == 13) {
			console.log('您按下了Ctrl+Enter键');
		}
	});

 

 

注意一下：Firfirefox2.0中不支持 window.event.keyCode,

但是我们可以用event.which代替。但是为了使其能更具有普遍的兼容性，最好用event.keyCode|| event.which。当然Firfirefox2.0早已成为历史，所以键盘事件怎么写兼容性都是很好的。

 

键盘代码表如下：

写道

字母按键码
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 0 <--------> 48 1 <--------> 49
2 <--------> 50 3 <--------> 51 4 <--------> 52 5 <--------> 53
6 <--------> 54 7 <--------> 55 8 <--------> 56 9 <--------> 57

 

写道

数字按键码
数字键盘 1 <--------> 96 数字键盘 2 <--------> 97 数字键盘 3 <--------> 98
数字键盘 4 <--------> 99 数字键盘 5 <--------> 100 数字键盘 6 <--------> 101
数字键盘 7 <--------> 102 数字键盘 8 <--------> 103 数字键盘 9 <--------> 104
数字键盘 0 <--------> 105

 

写道

运算符按键码
乘号 <--------> 106 加号 <--------> 107 Enter <--------> 108 减号 <--------> 109
小数点 <--------> 110 除号 <--------> 111

 

写道

F1 <--------> 112 F2 <--------> 113 F3 <--------> 114 F4 <--------> 115
F5 <--------> 116 F6 <--------> 117 F7 <--------> 118 F8 <--------> 119
F9 <--------> 120 F10 <--------> 121 F11 <--------> 122 F12 <--------> 123
F13 <--------> 124 F14 <--------> 125 F15 <--------> 126
Backspace <--------> 8
Tab <--------> 9
Clear <--------> 12
Enter <--------> 13
Shift <--------> 16
Control <--------> 17
Alt <--------> 18
Caps Lock <--------> 20
Esc <--------> 27
空格键 <--------> 32
Page Up <--------> 33
Page Down <--------> 34
End <--------> 35
Home <--------> 36
左箭头 <--------> 37
向上箭头 <--------> 38
右箭头 <--------> 39
向下箭头 <--------> 40
Insert <--------> 45
Delete <--------> 46
Help <--------> 47
Num Lock <--------> 144
; : <--------> 186
= + <--------> 187
- _ <--------> 189
/ ? <--------> 191
` ~ <--------> 192
[ { <--------> 219
| <--------> 220
] } <--------> 221
'' ' <--------> 222