#JavaScript Login 페이지에서 Enter 누르면 실행

 

 

근래에는 개인적인 프로젝트로 프론트엔드도 구현하고 있는데요

 

로그인이나, 검색 등의 페이지에서

 

ENTER 버튼을 누르면 특정 함수가 실행되도록 구현하고 싶을 때가 있는데요

 

이럴 때 어떻게 해야하는지 보도록 하겠습니다.

 

 

 

제가 쓰는 로그인 Form 인데요 

 

여기서 아이디와 비밀번호를 입력한 후에 

ENTER 키를 누르면 로그인 함수가 실행되도록 만들어 보도록 하겠습니다.

 

<form action="" id="login_form">
    <div class="form-group label--floating"><input type="email" name="email"><label>이메일(아이디)</label>
    </div>
    <div class="form-group label--floating">
        <input type="password" name="password"><label>비밀번호</label></div>
</form>
<button class="btn btn-md btn-primary btn-block" id="login-btn" onclick="Login()">로그인</button>

 

당연히 로그인 버튼을 누르면 Login() 함수가 실행되도록 onclick에도 넣어줬습니다.

 

그리고 이 id=login_form 인 폼 태그 안에서

id, password 상관없이 엔터 키를 누르면 login 함수가 실행되도록 하려면

 

<script>
    $("#login_form").keypress(function (e) {
        if (e.keyCode === 13) {
            Login();
        }
    });
</script>

 

이렇게 jquery를 사용해서 keypress 메서드를 이용해 keycode가 13일때

 

즉 ENTER 키일때

 

Login 함수가 실행되도록 할 수 있습니다!