[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입

Posted at 2018.08.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(obj) {

    var number = obj.value.replace(/[^0-9]/g, "");
    var tel = "";

    // 서울 지역번호(02)가 들어오는 경우
    if(number.substring(0, 2).indexOf('02') == 0) {
        if(number.length < 3) {
            return number;
        } else if(number.length < 6) {
            tel += number.substr(0, 2);
            tel += "-";
            tel += number.substr(2);
        } else if(number.length < 10) {
            tel += number.substr(0, 2);
            tel += "-";
            tel += number.substr(2, 3);
            tel += "-";
            tel += number.substr(5);
        } else {
            tel += number.substr(0, 2);
            tel += "-";
            tel += number.substr(2, 4);
            tel += "-";
            tel += number.substr(6);
        }
    
    // 서울 지역번호(02)가 아닌경우
    } else {
        if(number.length < 4) {
            return number;
        } else if(number.length < 7) {
            tel += number.substr(0, 3);
            tel += "-";
            tel += number.substr(3);
        } else if(number.length < 11) {
            tel += number.substr(0, 3);
            tel += "-";
            tel += number.substr(3, 3);
            tel += "-";
            tel += number.substr(6);
        } else {
            tel += number.substr(0, 3);
            tel += "-";
            tel += number.substr(3, 4);
            tel += "-";
            tel += number.substr(7);
        }
    }

    obj.value = tel;
}
</script>
</head>
<body>
    <h2>전화 번호를 입력해 주세요</h2>
    <input type="text" onKeyup="inputTelNumber(this);" maxlength="13" style="text-align:center;"/>
</body>
</html>



위와같이 서울지역번호 02 두자리를 구분하는 if문에서 분기시켜서

해결하였지만. 개인적으로 위의 코드는 너무 길다는 것이 마음에 들지 않아서.

아래와 같이 수정해 보았다.



# 소스코드②

<html>
<head>
<title>:: 전화번호 마이너스(-) 삽입 ::</title>
<script>
function inputTelNumber(obj) {

    var number = obj.value.replace(/[^0-9]/g, "");
    var tel = "";

    // 서울이라는 변수를 선언
    var seoul = 0;

    // 서울 지역번호(02)가 들어가는 경우 1을 삽입
    if(number.substring(0, 2).indexOf('02') == 0) {
        seoul = 1;
    }

    // 문자열을 자르는 기준에서 서울의 값을 뺄쌤(-)한다.
    // 값이 1일경우 -1이 될것이고, 값이 0일경우 변화가 없다.
    if(number.length < (seoul - 4)) {
        return number;
    } else if(number.length < (seoul - 7)) {
        tel += number.substr(0, (seoul - 3));
        tel += "-";
        tel += number.substr(seoul - 3);
    } else if(number.length < (seoul - 11)) {
        tel += number.substr(0, (seoul - 3));
        tel += "-";
        tel += number.substr((seoul - 3), 3);
        tel += "-";
        tel += number.substr(seoul - 6);
    } else {
        tel += number.substr(0, (seoul - 3));
        tel += "-";
        tel += number.substr((seoul - 3), 4);
        tel += "-";
        tel += number.substr(seoul - 7);
    }
    obj.value = tel;
}
</script>
</head>
<body>
    <h2>전화 번호를 입력해 주세요</h2>
    <input type="text" onKeyup="inputTelNumber(this);" maxlength="13" style="text-align:center;"/>
</body>
</html>




# 출력결과 - 지역번호가 서울(02)인 경우




# 출력결과 - 지역번호가 서울(02)이 아닌경우








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기