이번편은 지난번 생년월일 입력 이벤트를 활용하여 카드번호 입력 후 4자리마다 하이픈 또는 공백등의 구분자를 붙여는 스크립트 예제에 대해서 알아보자.
참고로 기본적인 기능들은 앞서 생년월일 입력 이벤트와 유사하며 이를 조금만 활용하면되고 다만 카드 입력의 경우 보안이 중요한 만큼 마스크처리를 추가하였다.
카드번호 입력 후 유효성 체크하여 자동 구분자 넣어주는 스크립트
<style>
input[type="text"]{ width:100%; max-width:450px; padding:6px 2px; border:solid 1px cornflowerblue; outline: none;; }
</style>
<h3>카드 ex1) 1234-5678-9123-4567 </h3>
<input type="text" class="cardnum" value="" data-backspace="false">
<br><br>
<h3>카드 ex2) 1234-****-****-4567 </h3>
<input type="text" class="cardnum" value="" data-mask2="*" data-mask3="*">
<br><br>
<h3>카드 ex3) 1234 5678 9123 4567 </h3>
<input type="text" class="cardnum" value="" data-seq=" ">
<h3>카드 ex4) 1234 *** **** 4567 </h3>
<input type="text" class="cardnum" value="" data-seq=" " data-mask2="*" data-mask3="*">
<script>
// 유효성 체크
function valid(e){
let dataset = e.target.dataset;
let formatLen = 16;
let input = '';
input = e.target.value.replace(/[^0-9]/g, '');
if( input.length <= 0 ){ return input; }
input = input.substring(0,formatLen);
return input;
}
window.onload = function(){
let eventEles = document.querySelectorAll('.cardnum');
eventEles.forEach(function(v,i){
if( typeof v.dataset.seq == 'undefined' || v.dataset.seq == '' || v.dataset.seq.length > 1){ v.dataset.seq = '-'; }
if( typeof v.dataset.backspace == 'undefined' || v.dataset.backspace == '' || v.dataset.backspace != 'false'){ v.dataset.backspace = 'true'; }
for(k=1;k<=4;k++){
if( typeof v.dataset['mask'+k] == 'undefined' || v.dataset['mask'+k] == '' || v.dataset['mask'+k].length > 1){
v.dataset['mask'+k] = '';
v.dataset['maskSet'+k] = '$'+k;
}
else{
v.dataset['maskSet'+k] = v.dataset['mask'+k].repeat(4);
}
}
v.setAttribute('maxlength',19);
v.addEventListener('input',function(e){
let dataset = e.target.dataset;
let formatLen = 16;
let input = valid(e);
if( input.length < formatLen){
if(typeof dataset.value != 'undefined' ){
input = dataset.value;
if( dataset.backspace == 'true'){
input = input.substring(0,input.length-1);
}
e.target.removeAttribute('data-value');
}
e.target.value = input;
return false;
}
e.target.setAttribute('data-value',input);
input = input.replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, dataset.maskSet1+dataset.seq+dataset.maskSet2+dataset.seq+dataset.maskSet3+dataset.seq+dataset.maskSet4);
e.target.value = input;
});
v.addEventListener('blur',function(e){
let dataset = e.target.dataset;
let formatLen = 16;
let formatSeqLen = 19;
let input = e.target.value;
input = valid(e);
if( input.length != formatLen){ return false; }
e.target.setAttribute('data-value',input);
input = input.replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, dataset.maskSet1+dataset.seq+dataset.maskSet2+dataset.seq+dataset.maskSet3+dataset.seq+dataset.maskSet4);
e.target.value = input;
});
});
};
</script>
예제 페이지를 보면 확인 할 수 있겠지만 카드번호 16자리를 입력하고 나면 자동으로 구분자가 채워지게 되어있다. 그리고 백스페이스(삭제)키를 누르면 구분자가 사라지고 숫자형태가 다시 보여지게 되어있다.
카드번호 이벤트도 생년월일 이벤트와 같이 input 태그에서 data 속성을 통해 옵션을 줄 수 있는데 옵션의 기본 사용방법은 생년월일 이벤트와 동일하며 추가적으로 마스킹 처리 옵션이 추가되었으니 참고하도록 하자.
속성 | data-seq
seq 속성은 구분자이며 하이픈(-), 공백 등 문자 1개까지 지원된다. (기본 하이픈)
<input type="text" class="cardnum" value="" data-seq="-">
속성 | data-mask*
mask 속성은 입력된 구간의 마스킹 처리를 위한 옵션으로 1~4까지 구분자를 지정가능하며 최대 1개 문자까지 지원된다.
<input type="text" class="cardnum" value="" data-mask2="*" data-mask3="*">
속성 | data-backspace
backspace 옵션은 입력창에서 백스페이스 키를 누를시 처리 방법이며 기본 true 이며 true의 경우 맨 뒤 숫자가 삭제가 되며 이값이 false 일 경우에는 맨뒤의 값은 삭제가 안된고 한번 더 삭제를 누를 시 최종 삭제가 된다.
<input type="text" class="birthday" value="" data-backspace="false" >
추가로 이벤트를 보면 blur가 추가되었는데 이는 backspace 옵션이 false 일경우 삭제하고 나면 숫자형태로 그대로 남기 때문에 영역을 벗어나면 다시 구분자를 붙여주기 위해 추가하였다.