[JavsScript] Enter(엔터)에 이벤트 주는 방법

by

#자바스크립트 #키이벤트 #엔터 #event.keyCode

안녕하세요, 배곧동개발자 입니다.

자바스크립트로 웹페이지 개발을 하다보면 입력폼에서 엔터를 눌렀을 때에 이벤트를 발생시켜야 하는 경우가 매우 많습니다. 예를들자면 아이디/비밀번호 입력폼에서 엔터를 누를 시 로그인로직을 타게하는 경우가 있겠네요!

이런 경우에 어떻게 코드를 짜야할지 한번 알아볼까합니다.

1. keyPress event

key 이벤트는 몇가지로 나눌 수 있는데 일단 KeyPress 이벤트로 줘봅시다. 

<input type="password" id="pwd" onkeypress="javascript:funcLogin();">

이런식으로 pwd라는 입력폼에서 키보드가 두들겨 질 때에 funcLogin()이라는 함수를 호출하게 만들어주시면 됩니다.

2. event function

funcLogin() 이라는 함수를 호출할건데, 우리가 원하는건 엔터잖아요?! 기존 로그인 로직 위에 if문을 이용해서 덧씌워줄겁니다.

funciton funcLogin(){
  // 이거 한줄 넣으면 끝! 
  if(event.keyCode == 13){
    // 엔터키 눌렸을 때에 실행 될 로직 넣어주기
  }
}

뭔가 거창하게 말을 했으나 사실 if(event.keyCode == 13) 이거 한 줄 입니다. 작동 원리를 간단하게 설명드리자면

이벤트가 발생했을 때에 자바스크립트에서는 event에 이벤트 정보를 가져오게됩니다. 그 정보 중에 keyCode라는 정보 즉, 무슨 키가 눌렸는지에 대해서 아스키코드값으로 가져오게 되는데 엔터가 아스키코드값으로 13입니다.

고로 if(event.keyCode == 13) 라고 한다면 “만약 이벤트를 발생시려 누른 키보드가 엔터이면” 으로 해석할 수 있는 것이지요.

3. 다른 특수키

이 외에도 몇몇 특수키를 알려드려볼게요!

// shift
if ( event.keyCode == 16 )
// ctrl
if ( event.keyCode == 17 )
// alt
if ( event.keyCode == 18 )
// space
if ( event.keyCode == 32 )
// tab
if ( event.keyCode == 9 )
// esc
if ( event.keyCode == 27 )
// backspace
if ( event.keyCode == 8 )

이렇듯 엔터만이 아니라 다른 키들도 인식하여 활용 할 수 있으니 원하는 로직을 자유롭게 짜보실 수 있습니다.

엔터 어떻게 인식시켜!? 라고 막연히 생각할 땐 어려웠으나 한번 보니 엄청 쉽죠? 달랑 분기문 하나 입니다. 많이 검색해보시고 많이 익히셔서 더 쉽고 재미있는게 개발합시다.

이만, 배곧동개발자 였습니다.

Leave a Comment