[자바스크립트] 신용카드 번호 자동으로 하이픈(-) 넣기 (oninput)

아래 소스 코드는 사용자가 입력한 신용카드 번호에 자동으로 하이픈(-)을 추가하는 소스 코드입니다.
oninput 이벤트를 통해서 입력 필드의 값이 변경될 때마다 함수가 호출되도록 하였습니다. 또, 정규식을 사용하여 숫자 이외의 모든 문자를 제거하고 있습니다. 간단한 소스 코드이니 확인하시고 사용하시면 됩니다.

 

<script>
function formatCreditCard() {
	var inputElement = document.getElementById('creditCard');
	var inputValue = inputElement.value;
	var formattedValue = cardNoHyphen(inputValue);
	inputElement.value = formattedValue;
}
//신용카드 번호 하이픈(-) 추가
function cardNoHyphen(str){
	str = str.replace(/[^0-9]/g, '');
	var tmp = '';
	if( str.length < 5){
		return str;
	}else if(str.length < 9){
		tmp += str.substr(0, 4);
		tmp += '-';
		tmp += str.substr(4);
		return tmp;
	}else if(str.length < 13){
		tmp += str.substr(0, 4);
		tmp += '-';
		tmp += str.substr(4, 4);
		tmp += '-';
		tmp += str.substr(8, 4);
		return tmp;
	}else{
		tmp += str.substr(0, 4);
		tmp += '-';
		tmp += str.substr(4, 4);
		tmp += '-';
		tmp += str.substr(8, 4);
		tmp += '-';
		tmp += str.substr(12);
		return tmp;
	}
	return str;
}
</script>
<label for="creditCard">신용카드 번호:</label>
<input type="text" id="creditCard" oninput="formatCreditCard()" maxlength="19">

 

소스코드 실행 화면