[JavaScript] Enter(엔터) 키 입력 이벤트

jsp로 로그인 화면을 만들던 중 엔터로도 로그인 버튼이 작동하도록 수정을 해야했다. 처음에는 아래와 같이 버튼 클릭으로 로그인이 되도록 되어 있었다.

 

 

<form name="login_form" id="login_form">
    <input type="text" id="userID" name="userID" placeholder="아이디"><br>
    <input type="password" id="pw" name="pw" autocomplete="false" placeholder="비밀번호"><br>
    <input type="submit" id="login" onclick="onBtnLogin()" value="로그인">
</form>

 

 

엔터키로 로그인이 되도록 간단하게 찾아보았다.

텍스트 입력 부분에 window.event.keyCode==13 이란걸 추가하면 눌리는 키를 식별해서 해결할 수는 있었다.

 

 

<form name="login_form" id="login_form">
    <input type="text" id="userID" name="userID" placeholder="아이디" onkeyup="if(window.event.keyCode==13){onBtnLogin()}"><br>
    <input type="password" id="pw" name="pw" autocomplete="false" placeholder="비밀번호" onkeyup="if(window.event.keyCode==13){onBtnLogin()}"><br>
    <input type="button" id="login" onclick="onBtnLogin()" value="로그인">
</form>

 

 

이렇게하면 기능은 문제없이 작동한다.

 

 

 

 

하지만, event 라는 단어에 취소선이 그어지면서 내용을 확인해보니

event.keyCode는 브라우저 표준이 아니라 권장되는 방식이 아니라는것 같다.

그래서 다른 방법을 찾아보려하기전에 갑자기 궁금증이 생겨서 찾아본것이 있었다.

onkeyup, onkeydown, onkeypress의 차이점들은 무엇일까?

 

 

onkeyup	키를 눌렀다가 놓았을 때 이벤트 발생	누르는 모든 키를 입력으로 받는다. (문자, 숫자, ctrl, alt, enter, F1, ...)
onkeydown	키를 눌렀을 때 이벤트 발생	누르는 모든 키를 입력으로 받는다. (문자, 숫자, ctrl, alt, enter, F1, ...)
onkeypress	키를 눌렀을 때 이벤트 발생	문자, 숫자만 입력으로 받는다.

 

 

onkeyup/onkeydown과 onkeypress가 키 입력 방식이 다른 이유는 앞의 두가지는 keycode 형태이고, onkeypress는 ASCII 형태이기 떄문이라한다.

 

(참고: http://keycode.info/ - 눌리는 키 값 확인)

 

JavaScript Key Code Event Tool & List | Toptal®

 

 

결국 다시 찾기 시작했고, 다른 해결책을 찾았다. 생각보다 더 간단했다.

하나의 폼에 있을때 submit 타입은 굳이 별도의 작업을 하지 않아도 엔터키의 입력을 받고있었다.

(다른 사람들은 이걸 방지하는 방법을 찾고 있던데...)

 

 

<form name="login_form" id="login_form">
    <input type="text" id="userID" name="userID" placeholder="아이디"><br>
    <input type="password" id="pw" name="pw" autocomplete="false" placeholder="비밀번호"><br>
    <input type="submit" id="login" onclick="onBtnLogin()" value="로그인">
</form>

 

 

어쨋든 이렇게해서 원하던 결과는 만들었다.