[Javascript] event.keyCode 코드값
배경
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
안녕하세요,HTML를 배우고 잇는데요…
위에 있는 자료는 코드를 하나 눌렀을때 함수가 호출는건데,,, 여러개의 코드를 눌러서 하는 방법은 없나요?
http://datalink.lael.be/qdic.kr/Javascript-eventkeyCode-Value_ex01.html
예제에서 키보드 입력을 동시에 여러개 입력해보고 onkeyup 을 확인해보세요.
안녕하세요.
질문하나 드리려 합니다.
이론 : keyCode는 아스키코드에 기반한다.에 대한것인데요
keycode Table표를 보거나 구글에서 keycode Table이라고 검색하면 나오는 자바스크립트로 keycode알려주는 사이트를 보아도 위에 나온 table처럼 NumberPad0~NumberPad9는 96~107번으로 나옵니다.
그런데 자바스크립트에서 event.keyCode를 찍어보면 NumberPad0을 눌렀다고 가정하면 48번(아스키코드값)이 찍힙니다. 결국 누르는 값이 아스키코드로 변환되는데 keycode Table은 그럼 무엇을위해 존재하는 것인지 궁금합니다. 질문이 난해하셨다면 메일주시면 원 소스첨부해서 다시 질문드리겠습니다.
일반적으로 많이 쓰이는 104키(or 108키) 키보드 기준으로 Numlock 이 켜진상태에서 Q 위쪽 1 을 누르면 키코드가 49가 나오고, 방향키 옆 NUM1 키 누르면 97이 나옵니다.
Numlock 이 아예 존재하지 않는 키보드 (예를들어 애플키보드) 같은 경우 NUM1 이 아예 존재하지 않기 때문에 양쪽 모두 49가 나옵니다.
(윈도우 PC + 표준 키보드) 환경에서 본문의 예제 1번을 실행해보세요.
2번예제의 1번은 숫자만 입력할 수 있는 예제인데
한글이 입력되는데요. 한글도 막을수는 없는건가요?
제가 쓴 다른 글 https://blog.lael.be/post/81 을 참고해주세요.