Example analysis of keyboard event usage in javascript_javascript skills

This article analyzes the usage of keyboard events in JavaScript with examples. Share it with everyone for your reference. The details are as follows:

Keyboard events include onkeydown, onkeypress and onkeyup

Event initialization

function keyDown(){} 
document.onkeydown = keyDown; 
//论按下键盘上的哪个键，都将调用KeyDown()函数。 

DOM standard

function keyDown(e) { 
var keycode = e.which; //取得对应的键值（数字） 
var realkey = String.fromCharCode(e.which); //取得代表改键的真正字符 
alert("按键码: " + keycode + " 字符: " + realkey); 
} 
document.onkeydown = keyDown 

Under IE

function keyDown() { 
　　 　　 var keycode = event.keyCode; //IE下取得键值的方法 
　　 　　 var realkey = String.fromCharCode(event.keyCode); 
　　 　　 alert("按键码: " + keycode + " 字符: " + realkey); 
} 
document.onkeydown = keyDown 

Compatible methods

function keyUp(e) { 
　　 　 var currKey=0,e=e||event; 
　　 　 currKey=e.keyCode||e.which||e.charCode; 
　　 　　var keyName = String.fromCharCode(currKey); 
　　 　 alert("按键码: " + currKey + " 字符: " + keyName); 
} 
document.onkeyup = keyUp; 

Principle of use: keydown event is most useful for function keys, while keypress event is most useful for printable keys

The following key code values ​​are only fully valid in the text box. If used in the tag, only letter keys, numeric keys and some control keys are available. The key values ​​of the letter keys and numeric keys are the same as the ASCII values

Key code value (keyCode) of alphabetic and numeric keys

Key code
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

Key code value (keyCode) of the key on the numeric keyboard Function key key code value (keyCode)

Key code
0 96
1 97
2 98
3 99
4 100
5 101
6 102
7 103
8 104
9 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

Control key key code value (keyCode)

Key code
BackSpace 8
Esc 27
Right Arrow 39
Left Arrow 37
Down Arrow 40
Up Arrow 38
-_ 189
.> 190
Spacebar 32
Tab 9
Clear 12
Page Up 33
Page Down 34
Enter 13
Insert 45
;: 186
Delete 46
`~ 192
/? 191
Num Lock 144
Control 17
Home 36
End 35
Shift 16
[{            219
}]             221
| 220
= 187
,< 188
'" 222
Cape Lock 20
Alt 18

I hope this article will be helpful to everyone’s JavaScript programming design.