개발자의 끄적끄적

[javascript/jquery] 자바스크립트 카드번호 하이픈 표시 함수 본문

개발/javascript & jquery

[javascript/jquery] 자바스크립트 카드번호 하이픈 표시 함수

효벨 2020. 12. 9. 02:00
728x90
반응형

[javascript/jquery] 자바스크립트 카드번호 하이픈 표시 함수

 

 

javascript 에서

 

input 에 카드번호를 입력받았을때,

 

하이픈(-) 을 넣어주는 자바스크립트 함수 예제입니다.

        var card_val = "카드번호";
        var tmp = "";
        if( card_val.length < 4){
            tmp += card_val;
        }else if(card_val.length < 8){
            tmp += card_val.substr(0, 4);
            tmp += '-';
            tmp += card_val.substr(4);
        }else if(card_val.length < 12){
            tmp += card_val.substr(0, 4);
            tmp += '-';
            tmp += card_val.substr(4, 4);
            tmp += '-';
            tmp += card_val.substr(8);
        }else{              
            tmp += card_val.substr(0, 4);
            tmp += '-';
            tmp += card_val.substr(4, 4);
            tmp += '-';
            tmp += card_val.substr(8, 4));
            tmp += '-';
            tmp += card_val.substr(12);
        }

 

위내용을 보시면 아시겠지만,

 

카드번호는 16자리이니 해당 내용에 맞게 수정 했습니다.

 

그리고 중간 4자리 마스킹처리는 응용을 테스트 해보시고 입맛에 맞게 수정하시면 될듯합니다.

 

저는 위 함수를 input에 onkeyup 으로 구현했습니다!

 

참고들 하세요!

반응형
Comments