[제이쿼리 jQeury] 엔터키로 로그인 / 엔터키 이벤트 / Enter키 함수

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는

자바스크립트 / 제이쿼리를 사용하여 엔터키(Enter)로 버튼을 누르는 이벤트에 대해 다뤄볼게요.

 

 

✔ 작업 전 미리 체크! e.keyCode == '13'

'13'은 javascript Keycode(ACSII Code)에서 엔터키를 의미합니다.

어차피 다 외우진 못하니 필요한 것만 그때 그때 찾아서 사용하면 될 것 같아요.

 

 

  1. html 작성하기

input 태그를 사용하여 아이디와 비밀번호를 입력하게 했어요.

maxlength를 사용하여 각각 글자수를 정해놨습니다.

 

비밀번호 같은 경우에는 type="password"로 타이핑할 때 텍스트 내용이 *로 보이게 처리했어요.

<div>
  <label>아이디</label>
  <input id="ID" placeholder="아이디를 입력하세요." type="text" maxlength="15">
</div>
<div>
  <label>비밀번호</label>
  <input id="PWD" placeholder="비밀번호를 입력하세요." type="password" maxlength="15">
</div>
<button class="loginBtn">로그인</button>

 

 

 

  2. js 작성하기

1) keyCode == '13' 이용하기

$('#ID #PWD').on('keypress', function(e){
  if(e.keyCode == '13'){
  	$('.loginBtn').click();
  }
});

 

2) code = 'Enter' 이용하기

꼭 13 번호가 아니어도 Enter키를 지정할 수 있어요.

말 그대로 'Enter'를 입력하는 방법오 있으니 참고해 주세요!

$('#ID, #PWD').on('keydown', function(e){
	if (e.code == 'Enter'){
		$('.loginBtn').click()
	}
})