본문으로 바로가기

자바스크립트로 클라이언트단 페이지 개발을 하다보면 많은 경우에 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 함수를 작성해도 되지만, 제이쿼리를 사용해 이벤트를 잡아내는 방법으로 작성했다.


1
2
3
4
5
6
7
8
9
/*HTML input text*/
<input type="text" id="test">
 
/*script function*/
$("#test").keyup(function(event){
    if(event.keyCode == 13){
        alert('엔터키 입력!');
    }
});
cs


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

 Other Contents 

댓글을 달아 주세요

티스토리 툴바