웹 개발을 하다 보면 텍스트 박스에서 submit, button 을 누르지 않고 엔터만으로 데이터를 전송하거나 페이지를 이동하는 등 액션이 들어가야할 부분들이 있습니다. 간단하게 이벤트 핸들러랑 javascript 를 이용해서 텍스트 입력창에서 엔터를 누를 시 처리를 하도록 코드를 만들어볼 수 있습니다.

<input type=text>

Key 입력을 받을 수 있는 이벤트 핸들러는 다양합니다. 움 아래에서는 onkeypress 를 사용하도록 하겠습니다.

<input type=text onkeypress="javascript:if(event.keyCode == 13){document.write('이 구역이 Key 입력 13[enter] 후 실행되는 구간입니다.');}" value="">

javascript 부분을 살펴보면 매우 간단합니다. (마치 대학교 과제에서 switch 문에서 입력 별 처리 만드는거랑 비슷하죠)

if(event.KeyCode == 13)
{
 // 처리 구간
}

event에서 KeyCode를 통해 입력되는 Key Event 를 받아옵니다. 받아온 값과 Enter(Keycode 13)과 비교해서 엔터 입력 시 처리를 하도록 합니다.

참고 데이터로 키입력 이벤트 핸들러랑 KeyCode 입니다.

Key Event Handler

• onkeydown: 키가 눌렸을 때 실행
• onkeypress: 키가 눌렸을 때 실행
• onkeyup: 키에서 손을 뗐을 때 실행

Key Code

backspace8
tab9
enter13
shift16
ctrl17
alt18
pause/break19
caps lock20
escape27
page up33
page down34
end35
home36
left arrow37
up arrow38
right arrow39
down arrow40
insert45
delete46
048
149
250
351
452
553
654
755
856
957
a65
b66
c67
d68
e69
f70
g71
h72
i73
j74
k75
l76
m77
n78
o79
p80
q81
r82
s83
t84
u85
v86
w87
x88
y89
z90
left window key91
right window key92
select key93
numpad 096
numpad 197
numpad 298
numpad 399
numpad 4100
numpad 5101
numpad 6102
numpad 7103
numpad 8104
numpad 9105
multiply106
add107
subtract109
decimal point110
divide111
f1112
f2113
f3114
f4115
f5116
f6117
f7118
f8119
f9120
f10121
f11122
f12123
num lock144
scroll lock145
semi-colon186
equal sign187
comma188
dash189
period190
forward slash191
grave accent192
open bracket219
back slash220
close braket221
single quote222