검색 엔터키
키가 눌렸다 떼지는 순간인 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 [𝙸𝚠𝚘𝚛𝚕𝚍𝚃]
'🤹🏻♀️ Javascript' 카테고리의 다른 글
lodash compact (0) | 2022.05.09 |
---|---|
[JS] Microtask (0) | 2022.05.08 |
async, await, 즉시 실행 함수 (0) | 2022.04.26 |
클로저의 활용 사례 (0) | 2022.04.24 |
async, await (0) | 2022.04.23 |