[JQuery] 카드번호 자동 대쉬 붙이기

안녕하세요!! 처음 시작을 어떻게 해야할지 아직도 잘 모르겠네요 ㅎㅎ

포스팅을 하고 싶어서 오늘도 짬을 내서 왔습니다! (아직 할일이 산더미 같지만요....)

카드번호에 자동 대쉬(-) 붙이기에 대해서 포스팅 할껀데요

위에서 보는 바와 같이 숫자를 입력하게 되면 자동으로 대쉬가 붙도록 해보겠습니다!

사실 저는 input 박스를 4개로 나눠서 개발하고 싶었는데요...(그게 훨씬 더 편하니까요 ㅎㅎ)

그런데 이와 같은 요구가 들어왔습니다!!!

그럼 우선 html 코드부터 보시죠!

<div class="input-title">카드번호</div>
<div class="input-title-line"></div>
<div class="input-content">
    <input type="text" class="form-control" name="card_number" id="card_number" maxlength="19" >
</div>

위와 같이 되어있습니다!

카드번호는 총 16자리에 대쉬가 세개라서 maxlength 는 19입니다.

이제 Jquery 코드를 살펴보겠습니다.

var cardNumber = document.getElementById('card_number');
cardNumber.onkeyup = function(event){
    event = event || window.event;
    var _val = this.value.trim();
    this.value = autoHypenCard(_val) ;
};

 

우선 키업 이벤트부터 살펴볼게요!

별거는 없습니다 ㅎㅎㅎ

id가 card_number인 태그를 가져오구요!

키업 이벤트가 발생했을 때, value값을 autoHypenCard 라는 값에 인자로 넘겨주는 구조입니다.

그러면 autoHypenCard 함수를 살펴보겠습니다!

function autoHypenCard(str){
    str = str.replace(/[^0-9]/g, '');
    var tmp = '';
    if( str.length < 4){
        return str;
    }
    else if(str.length < 8){
        tmp += str.substr(0, 4);
        tmp += '-';
        tmp += str.substr(4,4);
        return tmp;
    }else if(str.length < 12){
        tmp += str.substr(0, 4);
        tmp += '-';
        tmp += str.substr(4, 4);
        tmp += '-';
        tmp += str.substr(8,4);
        return tmp;
    }else if(str.length < 17) {

        tmp += str.substr(0, 4);
        tmp += '-';
        tmp += str.substr(4, 4);
        tmp += '-';
        tmp += str.substr(8,4);
        tmp += '-';
        tmp += str.substr(12,4);
        return tmp;
    }
    return str;
}

이것도 마찬가지로 별거는 없습니다 ㅎㅎㅎ

우선 input창에 value값이 인자값으로 넘어오고

str = str.replace(/[^0-9]/g, '');

이 코드는 정규식을 이용해서 0~9 즉 숫자를 제외한 문자들은 '' 널스트링으로 바꿔주라는 뜻입니다!

그리고 문자의 길이를 세서 카드번호는 4자리씩이기 때문에 4자리 8자리 이런식으로 분기문을 나눕니다.

분기문을 나누고 4자리 - 4자리 - 4자리 - 4자리 이런식으로 만들어주는 구조입니다.

이 만들어진 값을 리턴합니다.

this.value = autoHypenCard(_val) ;

그러면 키업이벤트에서 리턴값을 설정하게 되는거죠!!

이 예제를 이용하게 되면 핸드폰 번호라던가 주민번호라던가 등등에서 

인풋박스 하나에 자동으로 대쉬를 붙이는 것을 응용할 수 있습니다~

이만 포스팅을 마치겠습니다.

안녕히 계세요!