[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입
Posted at 2018. 8. 21. 10:04 | Posted in JavaScript & jQuery/JavaScript반응형
■ 휴대폰 번호 하이픈(-)기호 자동 삽입
# 소스코드
| <html> <head> <title>:: 휴대폰 번호 마이너스(-) 삽입 ::</title> <script> function inputPhoneNumber(obj) { var number = obj.value.replace(/[^0-9]/g, ""); var phone = ""; if(number.length < 4) { return number; } else if(number.length < 7) { phone += number.substr(0, 3); phone += "-"; phone += number.substr(3); } else if(number.length < 11) { phone += number.substr(0, 3); phone += "-"; phone += number.substr(3, 3); phone += "-"; phone += number.substr(6); } else { phone += number.substr(0, 3); phone += "-"; phone += number.substr(3, 4); phone += "-"; phone += number.substr(7); } obj.value = phone; } </script> </head> <body> <h2>휴대폰 번호를 입력해 주세요</h2> <input type="text" onKeyup="inputPhoneNumber(this);" maxlength="13" style="text-align:center;"/> </body> </html> |
# 출력결과
■ 지역번호 서울 예외처리(02)
위의 코드를 구태여 휴대폰 번호라고 굳이 지정한것은.
한국의 특수한 지역번호 사정 때문이다.
휴대폰 번호 : 010-0000-0000
전화 번호 : 031-0000-0000
위와같이 휴대폰 번호나, 전화번호나 문자열의 길이는 기본적으로 13자리로 같지만
단한가지 서울특별시만은 전화번호이 앞 지역번호가 02 두자리이기에 따로 예외 처리가 필요했다.
그래서 아래와같이 전체적으로 사용할 수 있게 코드를 수정해 보았다.
# 소스코드
| <html> <head> <title>:: 전화번호 마이너스(-) 삽입 ::</title> <script> function inputTelNumber( ele ) { if( event.keyCode != 8 ) { const regExp = new RegExp( /^[0-9]{2,3}-^[0-9]{3,4}-^[0-9]{4}/g ); if( ele.value.replace( regExp, "").length != 0 ) { if( checkPhoneNum( ele.value ) == true ) { let number = ele.value.replace( /[^0-9]/g, "" ); let tel = ""; let seoul = 0; if( number.substring( 0, 2 ).indexOf( "02" ) == 0 ) { seoul = 0; } 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 ); } ele.value = tel; } } } } function checkPhoneNum( number ) { const regExp = new RegExp( /^[0-9|-]*$/ ); if( regExp.test( number ) == true ) { return true; } else { return false; } } </script> </head> <body> <h2>전화 번호를 입력해 주세요</h2> <input type="text" onKeyup="inputTelNumber(this);" maxlength="13" style="text-align:center;"/> </body> </html> |
# 출력결과 - 지역번호가 서울(02)인 경우
# 출력결과 - 지역번호가 서울(02)이 아닌경우
반응형
'JavaScript & jQuery > JavaScript' 카테고리의 다른 글
| [JavaScript] Session 데이터 읽고, 쓰기 (0) | 2018.09.04 |
|---|---|
| [JavaScript] Cookie 생성, 삭제 및 읽어오기 (4) | 2018.09.03 |
| [JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입 (0) | 2018.08.20 |
| [JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스 (3) | 2018.08.17 |
| [JavaScript] 카드번호 입력폼 예제 (0) | 2018.04.18 |
