![[JavaScript] 휴대폰 번호 Hyphen(-) 삽입 형식 자동 입력폼](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGQkO6%2FbtrUzmaeA4G%2F0H60r0SD4CLhil8KdfiSYK%2Fimg.jpg)
728x90
휴대폰 번호와, 대한민국 전화번호 입력시( 지역번호 서울 02 예외처리 )
하이픈 기호( - )가 자동으로 입력이 되는 전화번호 입력폼을 제작하게 되었다.
아래의 조건을 만족하는 형태로 제작하였다.
· 휴대폰 번호 : 010-0000-0000
· 전화 번호 : 031-0000-0000( ex. 지역번호 서울 예외처리 : 02-0000-0000 )
# 소스코드
<html>
<head>
<title>:: 전화번호 하이픈(-) 기호 자동 삽입 ::</title>
</head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("txtPhone").addEventListener("keyup", function(event) {
inputPhoneNumber(event.target);
});
});
function inputPhoneNumber( phone ) {
if( event.keyCode != 8 ) {
const regExp = new RegExp( /^[0-9]{2,3}-^[0-9]{3,4}-^[0-9]{4}/g );
if( phone.value.replace( regExp, "").length != 0 ) {
if( checkPhoneNumber( phone.value ) == true ) {
let number = phone.value.replace( /[^0-9]/g, "" );
let tel = "";
let seoul = 0;
if( number.substring( 0, 2 ).indexOf( "02" ) == 0 ) {
seoul = 1;
phone.setAttribute("maxlength", "12");
console.log( phone );
} else {
phone.setAttribute("maxlength", "13");
}
if( number.length < ( 4 - seoul) ) {
return number;
} else if( number.length < ( 7 - seoul ) ) {
tel += number.substr( 0, (3 - seoul ) );
tel += "-";
tel += number.substr( 3 - seoul );
} else if(number.length < ( 11 - seoul ) ) {
tel += number.substr( 0, ( 3 - seoul ) );
tel += "-";
tel += number.substr( ( 3 - seoul ), 3 );
tel += "-";
tel += number.substr( 6 - seoul );
} else {
tel += number.substr( 0, ( 3 - seoul ) );
tel += "-";
tel += number.substr( ( 3 - seoul), 4 );
tel += "-";
tel += number.substr( 7 - seoul );
}
phone.value = tel;
} else {
const regExp = new RegExp( /[^0-9|^-]*$/ );
phone.value = phone.value.replace(regExp, "");
}
}
}
}
function checkPhoneNumber( number ) {
const regExp = new RegExp( /^[0-9|-]*$/ );
if( regExp.test( number ) == true ) { return true; }
else { return false; }
}
</script>
<body>
<div>
<h3>■ 전화 번호를 입력해 주세요</h3>
<input type="text" id="txtPhone" value="" style="text-align:center;" maxlength="13" placeholder="000-0000-00000" pattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{3,4}"/>
</div>
</body>
</html>
# 출력결과
■ 전화 번호를 입력해 주세요
728x90
'JavaScript' 카테고리의 다른 글
| [JavaScript] 입력한 텍스트의 Byte 체크 (0) | 2023.02.14 |
|---|---|
| [JavaScript] 입력한 텍스트의 문자길이 체크 (0) | 2023.02.14 |
| [JavaScript] 자바스크립트를 이용한 캘린더 제작 (8) | 2022.12.23 |
| [JavaScript] UTC값을 YYYY-MM-DD 형식으로 변경하기 (0) | 2022.05.24 |
| [JavaScript] 사용자 접속 Browser 이름 확인하기 (0) | 2021.08.12 |