(자바스크립트) 로그인페이지 - 엔터로 로그인하기

---

로그인화면 최초 인입 시, adminId 라는 name 값을 가진 input에 focus가 가게끔 합니다. 기존에 아이디기억하기에 체크한 후 로그인을 성공했던 흔적이 있어 쿠키에 adminId를 이미 가지고 있다면 이 쿠키 값을 admin_id input value에 넣어주고 isSaveId 체크박스를 checked 했습니다.

​

이렇게 되면 adminId 라는 값은 이미 value가 있기에 수동으로 재타이핑 할 이유가 없으므로, 이때는 adminPwd라는 input으로 focus가 가게끔 처리 했습니다. 모두 입력 후 로그인버튼을 마우스로 클릭하지 않고, 바로 엔터키만 누르면 로그인이 되도록 구성했습니다.

* 쿠키 관련된 로직은 각자 사용하는 로직이 따로 있을테니, 있다고 가정하고 표준적인 방법으로 기술하였습니다.

 

아 이 디 : <input type='text' name='adminId'>
비밀번호 : <input type='password' name='adminPwd'>
<label><input type='checkbox' name='isSaveId'>아이디기억하기</label>

<input type='button' name='btnLogin' value='로그인'>

 

 

<script>
    $(document).ready(function() {
        // 저장 된 쿠키값을 가져온다고 가정합니다.
        var key = getCookie("idKey");
        $("input[name='adminId']").val(key);

        // adminId에 값이 있을 때 
        if($("input[name='adminId']").val() != "") {
            $("input:checkbox[name='isSaveId']").prop("checked", true);
            $("input[name='adminPwd']").focus();
        } else {
            $("input[name='adminId']").focus();
        }

        // 아이디기억하기 체크박스에 변화를 줄 때
        $("input:checkbox[name='isSaveId']").change(function() {
            if($("input:checkbox[name='isSaveId']").is(":checked") == true) {
                setCookie("idKey", $("input[name='adminId']").val(), 3);
            } else {
                delCookie("idKey");
            }
        }

        // adminID를 입력할 때 아이디기억하기가 체크 된 경우
        $("input[name='adminId']").keyup(function() {
            if($("input:checkbox[name='isSaveId']").is(":checked") == true) {
                setCookie("idKey", $("input[name='adminId']").val(), 3);
            }
        }

        // 키보드 액션
        $(document).keydown(function(e) {
            // 엔터
            if(e.keycode == 13) {
                // 아이디 비빌번호 등 필수값 입력여부 체크
                isValueChk();
   
                // 로그인
                login();
            }
        });
    });
</script>