[JS] 검색 엔터키

검색 엔터키

키가 눌렸다 떼지는 순간인 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가 동일하지만, 다른 키들은 다르므로 구분하여 사용한다.

 

출처: https://iworldt.tistory.com/40 [𝙸𝚠𝚘𝚛𝚕𝚍𝚃]