ASCII Keycode 목록과 Javascript event.keyCode 예제

자바스크립트로 클라이언트단 페이지 개발을 하다보면 많은 경우에 Key Code를 알아야 할 경우가 생긴다.

해당 웹 페이지에서 작동하는 단축키를 만든다던지, 특정 키를 막는다던지 하는 기능을 개발할 때 필요하다.

또한 가장 많이 사용되는 경우로는 검색 영역에서 엔터키를 치면 검색 버튼을 수행하는 기능도 input 영역에서 키 입력시마다 keyCode를 체크해서 엔터키가 들어오면 검색을 수행하게 된다.

이처럼 많은 경우에 keycode가 쓰이지만 키 하나 하나에 대한 코드를 외우고 있을 수 없기에 필요할 때마다 검색을 해서 찾아 쓰곤 한다. (가장 많이 쓰이는 앤터키 정도는 알아두면 검색하는 수고를 덜 수 있다.)

ASCII Key Code 테이블

영문알파벳/숫자, 숫자패드, 기타키로 구분했다. 

원하는 키를 Ctrl+F해서 찾으면 편리하다.

1. A~Z / a~z / 0~9

Letter or number key	ASCII key code
A	65
B	66
C	67
D	68
E	69
F	70
G	71
H	72
I	73
J	74
K	75
L	76
M	77
N	78
O	79
P	80
Q	81
R	82
S	83
T	84
U	85
V	86
W	87
X	88
Y	89
Z	90
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	97
b	98
c	99
d	100
e	101
f	102
g	103
h	104
i	105
j	106
k	107
l	108
m	109
n	110
o	111
p	112
q	113
r	114
s	115
t	116
u	117
v	118
w	119
x	120
y	121
z	122

2. Numeric Keypad 키코드

Numeric keypad key	ASCII key code
Numpad 0	48
Numpad 1	49
Numpad 2	50
Numpad 3	51
Numpad 4	52
Numpad 5	53
Numpad 6	54
Numpad 7	55
Numpad 8	56
Numpad 9	57
Multiply	42
Add	43
Enter	13
Subtract	45
Decimal	46
Divide	47

3. 기타키 키코드

Key	ASCII key code
Backspace	8
Tab	9
Enter	13
Shift	0
Control	0
Caps Lock	0
Esc	27
Spacebar	32
Page Up	0
Page Down	0
End	0
Home	0
Left Arrow	0
Up Arrow	0
Right Arrow	0
Down Arrow	0
Insert	0
Delete	127
Num Lock	0
ScrLk	0
Pause/Break	0
; :	59
= +	61
- _	45
/ ?	47
` ~	96
[ {	91
\ |	92
] }	93
" '	39
,	44
.	46
/	47

Javascript 코드 예제

text input에서 엔터키를 눌렀을 때 alert 메시지를 띄우는 간단한 코드이다.

HTML 코드의 onkeyup이나 onkeydown에 javascript 함수를 작성해도 되지만, 제이쿼리를 사용해 이벤트를 잡아내는 방법으로 작성했다.

/*HTML input text*/
<input type="text" id="test">
 
/*script function*/
$("#test").keyup(function(event){
    if(event.keyCode == 13){
        alert('엔터키 입력!');
    }
});

HTML 태그에 작성하는 방법은 브라우저를 타는 경우가 많다. 이렇게 제이쿼리로 코딩하면 모든 브라우저에서 잘 작동해서 편하다.