[JS]키보드 이벤트, Enter 이벤트, key 이름, keyCode 총정리

자바스크립트 (JavaScript) 개발을 하다 보면 누구나 다 기본적으로 구성하는 화면이 아마 조회화면, 또는 로그인 화면 일 것이다.

그 때 우리는 검색창을 input 태그로 만들게 되고, 검색 버튼 또는 로그인 버튼을 통해서 기능을 수행하게 할 것이다.

그러나 여러 사이트에서 공통적으로 '엔터'를 입력하면 굳이 마우스로 버튼을 클릭하지 않아도 기능이 수행되도록 하고 있다. 그래서 이번 포스팅에서는  엔터 누르면 기능이 수행되도록 하는 엔터키 이벤트 에 대해서 알아보도록 하겠다.

 

키보드 이벤트

자바스크립트 키보드 이벤트는 3가지가 존재한다.

JS 키보드 이벤트

 

key down : 키가 눌렸을 때 발생 keypress : 키가 눌린 상태일 때 -- 더이상 사용되지 않습니다. 사용이 권장되지 않습니다. keyup : 키 누름이 해제될 때

 

따라서 굳이 엔터가 아니어도 모든 키보드 키의 값에 따른 이벤트를 등록할 수 있는 것이다.

key down은 키를 누르는 순간 발생하고, keyup은 눌린 키를 뗐을 때 발생한다.

keypress는 사용하지 말라고 권고하니 알아보지 말도록 하자..

 

 

키 이벤트 등록하고 사용하기

키보드의 키를 누르고 떼는 이벤트가 존재하는 것을 알았으니, 그 이벤트를 받아 콜백함수를 지정해 줄 곳을 찾아보자. 검색창을 만든다는 가정 하에, 검색창과 버튼을 만들어보겠다.

 

<input type="text" id="srch" onkeyup="onKeyUp(e)"/>
<button type="button" title="조회" id="btnSrch" onclick="doSearch()"/>

반응형

 

검색 단어를 입력할 input 창과, 검색 버튼을 만들었다. 

 

그렇다면 키가 눌렸다 떼지는 순간인 onkeyup 이벤트를 받을 곳은 버튼이 아닌 input이다.

만약 로그인 시 엔터 누르면 바로 로그인이 되도록 하는 기능을 구현하는 중이라면, 아이디-비번 순으로 입력하는 것이 일반적이므로 비밀번호를 입력하는 input 태그 내에 onkeyup 이벤트의 콜백함수를 지정해주면 되는 것이다.

onkeyup 이벤트를 받고 수행할 콜백함수에는 이벤트 정보를 e로 담아준다.

 

이제  js 코드를 살펴보자.

function onKeyUp(e){
    if (e.keyCode == 13){
    	doSearch();
    }
    /**
    if (e.key == 'Enter'){
        doSearch();
    }
    */
    /**
    if (e.code == 'Enter'){
        doSearch();
    }
    */
}

function doSearch(){
	/** 버튼 클릭이나 엔터가 클릭되었을 때 실행할 기능 */
}

 

키가 입력되면 onKeyUp() 함수가 실행될 것이고, 그 때 받은 e 객체에는 keyCode, key, code라는 정보가 존재한다.

1. 첫 번째 if 문 :

Enter키의 keyCode는 13이므로, 위처럼 이벤트의 keyCode가 13이라면 버튼 클릭과 같은 doSearch()함수를 실행시켜 주는 것이다.

2. 주석 처리된 두번 째 if 문 :

keyCode가 아닌 직접 key 이름으로 입력해줄수도 있다. 엔터키의 key 이름은 Enter이다.

3. 주석 처리된 세번 째 if 문 :

code로 입력해줄 수 있다. 엔터는 keyCode와 code가 동일하지만, 다른 키들은 다르므로 구분하여 사용한다.

 

 

키보드 keyCode 와 key

 code 이름 값 확인하기 

직접 key의 이름 값과 코드도 돌려볼 수 있는 사이트를 소개하겠다.

https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event

Document: keyup event - Web APIs | MDN

 

위의 사이트에 접속해보면 직접 코드를 실험해볼 수 있는 부분이 있다. 

 

바로 이부분인데, 3번째 네모칸을 클릭하여 포커스를 주자.

그리고 키보드를 입력하면 키보드의 key 값이 log로 나타난다. 원하는 키보드의 키 값을 이렇게 찾을 수도 있다.

 

←  →  스페이스바  1  2  스페이스바  I  T  엔터

를 순서대로 누른 모습이다. 누른 키보드 키에 따라 key 이름이 나오는 것을 확인할 수 있다.

 

 keyCode 값, key 값 확인하기 

http://keycode.info/

JavaScript Event KeyCodes

 

내가 누르는 key에 따라 keyCode값이 화면에 나오는 사이트이다.

이렇게 엔터를 누르면 13이라는 keyCode 값이 크게 나온다.

또는 하단에 key의 값과 code의 값 등이 나온다.

 

엔터와 같은 특수키와 다르게 i는 key 값과 code의 값이 다른 것을 확인할 수 있다.

 

이를 이용하여 꼭 엔터 키 뿐만이 아닌 다양한 키보드 이벤트를 페이지에 적용해보자.