[Javascript] event.keyCode 코드값

HYEONG HWAN, MUN/ 10월 18, 2014/ 미분류/ 6 comments

https://blog.lael.be/post/75

배경

Javascript 로 사용자의 키입력을 감지하여 함수를 처리할 수 있습니다.

 

이론

event.keyCode 는 ASCII 코드에 기반합니다.

 

내용

자주 사용되는 keyCode 값은 다음과 같습니다.

 

Key Code Reference Table

0 10 20 Caps Lock 30 40 Arrow Down
1 11 21 31 41
2 12 22 32 42
3 13 Enter 23 33 Page Up 43
4 14 24 34 Page Down 44
5 15 25 35 End 45 Insert
6 16 Shift 26 36 Home 46 Delete
7 17 Ctrl 27 Esc 37 Arrow Left 47
8 Backspace 18 Alt 28 38 Arrow Up 48 0
9 Tab 19 Pause/Break 29 39 Arrow Right 49 1
50 2 60 70 f 80 p 90 z
51 3 61 =+ 71 g 81 q 91 Windows
52 4 62 72 h 82 r 92
53 5 63 73 i 83 s 93 Right Click
54 6 64 74 j 84 t 94
55 7 65 a 75 k 85 u 95
56 8 66 b 76 l 86 v 96 0 (Num Lock)
57 9 67 c 77 m 87 w 97 1 (Num Lock)
58 68 d 78 n 88 x 98 2 (Num Lock)
59 ;: 69 e 79 o 89 y 99 3 (Num Lock)
100 4 (Num Lock) 110 . (Num Lock) 120 F9 130 140
101 5 (Num Lock) 111 / (Num Lock) 121 F10 131 141
102 6 (Num Lock) 112 F1 122 F11 132 142
103 7 (Num Lock) 113 F2 123 F12 133 143
104 8 (Num Lock) 114 F3 124 134 144 Num Lock
105 9 (Num Lock) 115 F4 125 135 145 Scroll Lock
106 * (Num Lock) 116 F5 126 136 146
107 + (Num Lock) 117 F6 127 137 147
108 118 F7 128 138 148
109 - (Num Lock) 119 F8 129 139 149
150 160 170 180 190 .>
151 161 171 181 191 /?
152 162 172 182 My Computer 192 `~
153 163 173 183 My Calculator 193
154 164 174 184 194
155 165 175 185 195
156 166 176 186 196
157 167 177 187 197
158 168 178 188 ,< 198
159 169 179 189 199
200 210 220 \| 230 240
201 211 221 ]} 231 241
202 212 222 ‘” 232 242
203 213 223 233 243
204 214 224 234 244
205 215 225 235 245
206 216 226 236 246
207 217 227 227 227
208 218 228 238 248
209 219 [{ 229 239 249

 

Demo

Mozilla 계열의 브라우저는 약간 다른방식으로 동작합니다. 함수내에서 event값을 사용하려면 반드시 그 값을 변수로 넘겨야 합니다.


<input type="text" onkeypress="keycheck(event)" />

 

Javascript 함수에서도 크로스브라우징을 위해서 event 로 전달된 값을 체크해야합니다.

대부분의 브라우저는 변수로 전달하지 않아도 함수내에서 event를 참조할 수 있습니다.
Mozilla 브라우저를 위해서 evt 전달된 값의 which 속성을 본 후 값이 유효하다면 이 값을 사용하도록 합시다.


function keycheck(evt){
    var keyCode = evt.which?evt.which:event.keyCode;
}

 

1. 다음의 링크는 사용자가 입력한 키의 keyCode 값을 알려줍니다.

IE와 크롬, Firefox 에서 값의 변화를 확인하세요.

예제링크 : https://laelbe.s3.amazonaws.com/blog/81/Javascript-eventkeyCode-Value_ex01.html

 

2. 다음의 링크는 keyCode값에 기반한 함수처리 예제입니다.

예제링크 : https://laelbe.s3.amazonaws.com/blog/81/Javascript-eventkeyCode-Value_ex02.html

 

6 Comments

  1. 안녕하세요,HTML를 배우고 잇는데요…

    위에 있는 자료는 코드를 하나 눌렀을때 함수가 호출는건데,,, 여러개의 코드를 눌러서 하는 방법은 없나요?

    1. http://datalink.lael.be/qdic.kr/Javascript-eventkeyCode-Value_ex01.html

      예제에서 키보드 입력을 동시에 여러개 입력해보고 onkeyup 을 확인해보세요.

  2. 안녕하세요.
    질문하나 드리려 합니다.
    이론 : keyCode는 아스키코드에 기반한다.에 대한것인데요
    keycode Table표를 보거나 구글에서 keycode Table이라고 검색하면 나오는 자바스크립트로 keycode알려주는 사이트를 보아도 위에 나온 table처럼 NumberPad0~NumberPad9는 96~107번으로 나옵니다.
    그런데 자바스크립트에서 event.keyCode를 찍어보면 NumberPad0을 눌렀다고 가정하면 48번(아스키코드값)이 찍힙니다. 결국 누르는 값이 아스키코드로 변환되는데 keycode Table은 그럼 무엇을위해 존재하는 것인지 궁금합니다. 질문이 난해하셨다면 메일주시면 원 소스첨부해서 다시 질문드리겠습니다.

    1. 일반적으로 많이 쓰이는 104키(or 108키) 키보드 기준으로 Numlock 이 켜진상태에서 Q 위쪽 1 을 누르면 키코드가 49가 나오고, 방향키 옆 NUM1 키 누르면 97이 나옵니다.
      Numlock 이 아예 존재하지 않는 키보드 (예를들어 애플키보드) 같은 경우 NUM1 이 아예 존재하지 않기 때문에 양쪽 모두 49가 나옵니다.
      (윈도우 PC + 표준 키보드) 환경에서 본문의 예제 1번을 실행해보세요.

  3. 2번예제의 1번은 숫자만 입력할 수 있는 예제인데
    한글이 입력되는데요. 한글도 막을수는 없는건가요?

Leave a Comment

작성하신 댓글은 관리자의 수동 승인 후 게시됩니다.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
*
*