Exemple d'analyse de l'utilisation des événements clavier dans les compétences javascript_javascript

Cet article analyse l'utilisation des événements de clavier en JavaScript avec des exemples. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Les événements de clavier incluent onkeydown, onkeypress et onkeyup

Initialisation de l'événement

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

Norme DOM

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

Sous IE

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

Méthodes compatibles

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; 

Principe d'utilisation : l'événement keydown est le plus utile pour les touches de fonction, tandis que l'événement keypress est le plus utile pour les touches imprimables

Les valeurs de code clé suivantes ne sont entièrement valides que dans la zone de texte. Si elles sont utilisées dans la balise , seules les touches alphabétiques, les touches numériques et certaines touches de contrôle sont disponibles. les clés sont les mêmes que les valeurs ASCII

Valeur du code clé (keyCode) des touches alphabétiques et numériques

Code clé
Un 65
B         66
C         67
D 68
E         69
F 70
G71
H72
Je 73
J         74
K75
L 76
M 77
N 78
Ô 79
P         80
Q       81
R82
S         83
T 84
U       85
V 86
W 87
X       88
Y 89
Z90
0 48
149
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57

Valeur du code de touche (keyCode) de la touche du clavier numérique Valeur du code de touche de fonction (keyCode)

Code clé
0 96
1 97
2 98
3 99
4 100
5 101
6 102
7 103
8 104
9 105
*106
107
Entrez 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

Valeur du code clé de la clé de contrôle (keyCode)

Code clé
RetourEspace 8
Échap 27
Flèche droite 39
Flèche gauche 37
Flèche vers le bas 40
Flèche vers le haut 38
-_189
.>190
Barre d'espace 32
Onglet 9
Effacer 12
Page précédente 33
Page suivante 34
Entrez 13
Insérer 45
;:186
Supprimer 46
`~ 192
/?191
Verrouillage numérique 144
Contrôle 17
Accueil 36
Fin 35
Equipe 16
[{            219
}]             221
| 220
= 187
,<188
'"222
Cap Écluse 20
Alt 18

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.