Back

[CODING] HTML에서 Javascript 를 이용한 Input 태그 엔터 처리(HTML Key Event Handler/Javascript Char Codes)

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

일단 입력 구간이 있어야겠지요.

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

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

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

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

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

Key Event Handler

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

Key Code

KeyCode 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

KeyCode 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

KeyCode 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