[javascript/jquery] jquery 주민등록번호 앞자리 입력 후 다음칸 이동하는 예제

[javascript/jquery] jquery 주민등록번호 앞자리 입력 후 다음칸 이동하는 예제

 

 

jquery 에서

 

주민등록번호 앞 6자리와 뒷 1자리를 입력하는 화면을

 

구현해야 하는 경우가 있습니다.

 

그럴때는 아래와 같이 이벤트를 이용해서 제어가 가능합니다.

 

 

우선 아래와 같이 input 태그가 2개 있다고 가정하고,

 

각각 maxlength 를 6 과 1 로 설정합니다.

<input type="text" id="id_data_birth_1" maxlength="6" numberOnly>
<input type="text" id="id_data_birth_2" maxlength="1">

 

그리고 앞 6자리에 해당되는 input 에 입력되는 값을 기준으로

 

숫자만 입력되게 허용하고, maxlength 에 설정되어있는 6자리가 입력되면

 

다음 input 로 포커스가 이동되게 하는 스크립트 입니다!

 

    $(document).on("keypress keyup keydown", "input[numberOnly]", function(e){
        if(/[a-z|ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g.test(this.value)){
            e.preventDefault();
            this.value = "";
        }else if (e.which != 8 && e.which != 0 && e.which < 48 || e.which > 57 && e.which < 96 || e.which > 105){
            e.preventDefault();
            this.value = "";
        }else if (this.value.length == this.maxLength){
            this.value = this.value.slice(0, this.maxLength);
            $("#id_data_birth_2").focus();
        }
    });

 

아래 사이트에서 스크립트를 가져와서 

 

주민등록번호 입력되는 화면으로 약간 수정한 버전이니 참고들하세요!

 

 

출처 : https://myhappyman.tistory.com/238

jQuery - input 숫자 하나만 입력 후 다음 칸으로 이동하기(모바일 비밀번호 입력 처리하기)