[jQuery] 휴대폰 번호, 전화번호 자동으로 하이픈 넣기 (keyup)

회원가입 폼을 만드실 때 휴대폰 번호와 전화번호의 입력을 받을 때가 있습니다.

이때 사용자의 입력값에 자동으로 하이픈(-)을 넣어주는 소스 코드입니다.

입력값의 길이를 체크해서 하이픈(-)을 넣어주고 있습니다.

html id 부분만 수정하시면 바로 사용 가능하십니다!

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#hpno,#telno").keyup(function(){
		var val = $(this).val().replace(/[^0-9]/g, '');
		if(val.length > 3 && val.length < 6){
			var tmp = val.substring(0,2)
			if(tmp == "02"){
				$(this).val(val.substring(0,2) + "-" + val.substring(2));
			} else {
				$(this).val(val.substring(0,3) + "-" + val.substring(3));
			}
		}else if (val.length > 6){
			var tmp = val.substring(0,2)
			var tmp2 = val.substring(0,4)
			if(tmp == "02"){
				if(val.length == "10"){
					$(this).val(val.substring(0,2) + "-" + val.substring(2, 6) + "-" + val.substring(6));
				} else {
					$(this).val(val.substring(0,2) + "-" + val.substring(2, 5) + "-" + val.substring(5));
				}
			} else if(tmp2 == "0505"){
				if(val.length == "12"){
					$(this).val(val.substring(0,4) + "-" + val.substring(4, 8) + "-" + val.substring(8));
				} else {
					$(this).val(val.substring(0,4) + "-" + val.substring(4, 7) + "-" + val.substring(7));
				}
			} else {
				if(val.length == "11"){
					$(this).val(val.substring(0,3) + "-" + val.substring(3, 7) + "-" + val.substring(7));
				} else {
					$(this).val(val.substring(0,3) + "-" + val.substring(3, 6) + "-" + val.substring(6));
				}
			}
		}
	});
});
</script>
<input type="text" id="hpno" name="hpno" placeholder="휴대폰번호를 입력하세요" maxlength="13">
<input type="text" id="telno" name="telno" placeholder="전화번호를 입력하세요" maxlength="13">