javascript_javascript 스킬의 키보드 이벤트 사용 분석 예시

이 글은 자바스크립트의 키보드 이벤트 사용법을 예시를 통해 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

키보드 이벤트에는 onkeydown, onkeypress 및 onkeyup이 포함됩니다.

이벤트 초기화

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

DOM 표준

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

IE에서

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

호환 가능한 방법

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; 

사용 원리: keydown 이벤트는 기능 키에 가장 유용하고, keypress 이벤트는 인쇄 가능한 키에 가장 유용합니다

다음 키 코드 값은 텍스트 상자에서만 완전히 유효합니다. 태그에 사용되는 경우 문자 키, 숫자 키 및 일부 컨트롤 키만 사용할 수 있습니다. 키는 ASCII 값과 동일합니다

알파벳과 숫자키의 키코드 값(keyCode)

키코드
A65
B         66
C         67
D68
E         69
F70
G71
H72
나는 73
J         74
K75
엘 76
남77
N78
오79
피         80
Q       81
R 82
S         83
T 84
유       85
V86
승87
X       88
와이89
Z 90
0 48
149
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57

숫자 키보드 키의 키 코드 값(keyCode) 기능 키 키 코드 값(keyCode)

키코드
0 96
197
298
399
4 100
5101
6 102
7103
8104
9 105
* 106
107
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

컨트롤키 키코드 값(keyCode)

키코드
백스페이스 8
Esc 27
오른쪽 화살표 39
왼쪽 화살표 37
아래쪽 화살표 40
위쪽 화살표 38
-_ 189
.>190
스페이스바 32
탭 9
12 클리어
페이지 위로 33
페이지 아래로 34
13을 입력하세요
45 삽입
;: 186
46개 삭제
`~192
/?191
Num Lock 144
컨트롤 17
홈36
35일 종료
16교대
[{            219
}]             221
220
= 187
,<188
'" 222
케이프락 20
Alt 18

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.