웹 개발을 하다 보면 텍스트 박스에서 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 입니다.
- onkeypress: 키가 눌렸을 때 실행
- onkeyup: 키에서 손을 뗐을 때 실행
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
page down 34
end 35
home 36
left arrow 37
up arrow 38
right arrow 39
down arrow 40
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
Key Code
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
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
Key Code
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
num lock 144
scroll lock 145
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 222
일단 입력 구간이 있어야겠지요.
<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
Key Codebackspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
page down 34
end 35
home 36
left arrow 37
up arrow 38
right arrow 39
down arrow 40
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
Key Code
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
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
Key Code
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
num lock 144
scroll lock 145
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 222
