javascript 키보드 이벤트 요약 추천

form 에서 submit 의 단축 키 는 enter 이 고 reset 의 단축 키 는 esc 입 니 다.그러나 IE6, safari 4, ff 3.5, opera 10, chrome 에서 Enter 를 누 르 면 form 의 submit 사건 을 자극 할 뿐만 아니 라 제출 버튼 의 onclick 도 자극 하여 제출 버튼 의 onclick → form 의 onsubmit 순 서 를 자극 합 니 다.
키보드 이벤트
[Ctrl + A 전체 주석: 외부 Js 를 도입 하려 면 새로 고침 이 필요 합 니 다.]
그러나 제출 단 추 를 누 르 면 form 의 submit 사건 을 자극 할 뿐만 아니 라 위의 요약 과 같이 다음 과 같 습 니 다.
1. 폼 에 type = "submit" 버튼 이 있 으 면 리 턴 키 가 적 용 됩 니 다.
2. 폼 에 type = "text" 의 input 만 있 으 면 버튼 이 어떤 type 이 든 리 턴 키 가 적 용 됩 니 다.
3. 버튼 이 input 이 아 닌 button 을 사용 하고 type 을 추가 하지 않 으 면 IE 아래 기본 값 은 type = button 이 고 FX 기본 값 은 type = submit 입 니 다.
4. 다른 폼 요소, 예 를 들 어 textarea, select 는 영향 을 주지 않 습 니 다. radio checkbox 는 트리거 규칙 에 영향 을 주지 않 지만 그 자체 가 FX 에서 Enter 키 에 응답 하고 IE 에서 응답 하지 않 습 니 다.
5. type = "image" 의 input, 효 과 는 type = "submit" 와 같 습 니 다.왜 이런 type 을 디자인 했 는 지 모 르 겠 지만 추천 하지 않 고 CSS 로 배경 그림 을 추가 하 는 것 이 적당 합 니 다.
단추 에 키보드 이 벤트 를 연결 하 는 것 외 에 브 라 우 저 에 링크 의 단축 키 를 지정 하 는 accesskey 속성 이 있 습 니 다.accesskey 설정 이 브 라 우 저의 메뉴 와 같 으 면 메뉴 보다 우선 합 니 다.IE 에서 단축 키 는 alt + 설정 키 이 고 FF 는 Alt + Shift + 설정 키 입 니 다.IE 에서 a 요소 의 accesskey 는 링크 에 초점 을 옮 길 뿐 클릭 과 같 지 않 고 FF 에 서 는 클릭 에 해당 합 니 다.그 와 비교 해 보면 input type = checkbox 의 accesskey 효 과 는 IE 나 FF 에서 모두 클릭 합 니 다.또한, 우 리 는 label 라벨 에 맞 춰 의 미 를 강화 할 수 있 으 며, 개인 적 으로 이런 방법 을 매우 추천 합 니 다.
나머지 는 프로 그래 밍 이 필요 합 니 다.javascript 사건 은 주로 다음 세 가지 사건 을 통 해 키보드 사건 을 캡 처 합 니 다: onkeydown, onkeypress 와 onkeyup.이 세 사건 의 실행 순 서 는 다음 과 같다. onkeydown - > onkeypress - > onkeyup.일반적인 상황 에서 세 가지 키보드 이 벤트 를 사용 하면 키보드 입력 에 효과 적 인 응답 을 할 수 있다.실제 사용 에서 이 몇 가 지 는 약간의 차이 가 있 음 을 발견 할 수 있다.
onkeypress 이 벤트 는 시스템 기능 키 (예 를 들 어 후퇴, 삭제 등) 에 대해 정상 적 인 응답 을 할 수 없습니다. onkeypress 와 onkeyup 은 모두 시스템 기능 키 를 효과적으로 차단 할 수 있 지만 이벤트 가 캡 처 한 위치 가 다 르 기 때문에 구체 적 인 상황 에 따라 서로 다른 키보드 이 벤트 를 선택 할 수 있 습 니 다.
onkeypress 가 시스템 기능 키 를 캡 처 할 수 없 기 때문에 window. event 대상 의 keyCode 속성 과 onkeydown, onkeypress 키보드 이벤트 에서 얻 은 keyCode 속성 이 다 릅 니 다. 주로 onkeypress 이벤트 의 keyCode 는 자모의 대소 문자 에 민감 하지만 onkeydown, onkeyup 사건 은 민감 하지 않 습 니 다.onkeypress 이벤트 의 keyCode 는 메 인 키보드 의 숫자 키 와 부 키보드 숫자 키 를 구분 할 수 없 으 며, onkeydown, onkeyup 의 keyCode 는 메 인 키보드 의 숫자 키 에 민감 합 니 다.
키보드 이벤트 td {text - align: center;} window. onload = function () {document. onkeydown = showKeyDown document. onkeyup = showKeyUp document. onkeypress = showKeyPress} function showKeyDown (evt) {evt = (evt)? evt: window. event document. getElementById ("pressKeyCode"). innerHTML = 0 document. getElementById ("upKeyCode").innerHTML = 0 document.getElementById("pressCharCode").innerHTML = 0 document.getElementById("upCharCode").innerHTML = 0 restoreModifiers("") restoreModifiers("Down") restoreModifiers("Up") document.getElementById("downKeyCode").innerHTML = evt.keyCode if (evt.charCode) { document.getElementById("downCharCode").innerHTML = evt.charCode } showModifiers("Down", evt) } function showKeyUp(evt) { evt = (evt) ? evt : window.event document.getElementById("upKeyCode").innerHTML = evt.keyCode if (evt.charCode) { document.getElementById("upCharCode").innerHTML = evt.charCode } showModifiers("Up", evt) return false } function showKeyPress(evt) { evt = (evt) ? evt : window.event document.getElementById("pressKeyCode").innerHTML = evt.keyCode if (evt.charCode) { document.getElementById("pressCharCode").innerHTML = evt.charCode } showModifiers("", evt) return false } function showModifiers(ext, evt) { restoreModifiers(ext) if (evt.shiftKey) { document.getElementById("shift" + ext).style.backgroundColor = "#ff0000" } if (evt.ctrlKey) { document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00" } if (evt.altKey) { document.getElementById("alt" + ext).style.backgroundColor = "#0000ff" } } function restoreModifiers(ext) { document.getElementById("shift" + ext).style.backgroundColor = "#ffffff"document. getElementById ("ctrl" + ext). style. backgroundColor = "\ # ffffff" document. getElementById ("alt" + ext). style. backgroundColor = "\ # ffffff"} 키보드 이벤트 onKeyDown onKeyPress onKeyUp 키 코드 0 0 0 0 0 0 Char Code (IE5 / Mac; NN6) 0 0 0
[Ctrl + A 전체 주석: 외부 Js 를 도입 하려 면 새로 고침 이 필요 합 니 다.]
우 리 는 다음 스 크 립 트 를 이용 하여 웹 페이지 의 키보드 이 벤트 를 감청 할 수 있 습 니 다. 사용자 가 Enter 키 를 누 르 면 연 결 된 이 벤트 를 시작 합 니 다.

 
  
function getKey(e){ 
  
e = e || window.event; 
  
var keycode = e.which ? e.which : e.keyCode; 
  
if(keycode == 13 || keycode == 108){ //    ENTER  
  
//             
  
} 
  
} 
  
 
  
//  keyup     document  
  
function listenKey ( ) { 
  
if (document.addEventListener) { 
  
document.addEventListener("keyup",getKey,false); 
  
} else if (document.attachEvent) { 
  
document.attachEvent("onkeyup",getKey); 
  
} else { 
  
document.onkeyup = getKey; 
  
} 
  
} 
  
 
 

마지막 으로 키보드 의 모든 단추 의 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 Arrow
38
,<
188
'"
222
또한 이벤트. altkey, 이벤트. ctrlKey, 이벤트. metaKey (위 에 마이크로소프트 깃발 이 있 음), 이벤트. shiftKey 로 대응 하 는 키 가 눌 렸 는 지 여 부 를 판단 할 수 있 습 니 다. 모두 불 값 을 되 돌려 주기 때 문 입 니 다.