[javascript/jquery] 자바스크립트 지역 전화번호 하이픈 예제

[javascript/jquery] 자바스크립트 지역 전화번호 하이픈 예제

 

javascript 에서

 

회원가입을 구현하다보면

 

사이트에 따라

 

지역번호를 포함한 전화번호를 입력받아야 하는 경우가 있습니다.

 

그럴때는 아래 함수를 이용하시면 됩니다!

 

 

 

우선 예를들어

 

아래와 같은 input 태그가 있다고 가정하고,

 

<input type="text" id="test_id"  placeholder=" '-' 없이 숫자만 입력해주세요" onkeyup="chk_tel(this.value,'test_id')"">

 

위 태그에 숫자를 입력할때마다

 

하이픈(-) 을 계산해서 넣고 싶으면

 

onkeyup 속성을 추가해 아래 함수를 호출하시면 됩니다!

 

서울 / 기타지역등 조건이 있으니

 

필요하시면 조건을 추가해서 사용하시면 됩니다!

 

    function chk_tel(str, id) {
        str = str.replace(/[^0-9]/g, '');
        var tmp = '';

        if (str.substring(0, 2) == "02") {
            if (str.length < 3) {
                $("#"+id).val(str);
            } else if (str.length < 6) {
                tmp += str.substr(0, 2);
                tmp += '-';
                tmp += str.substr(2);
                $("#"+id).val(tmp);
            } else if (str.length < 10) {
                tmp += str.substr(0, 2);
                tmp += '-';
                tmp += str.substr(2, 3);
                tmp += '-';
                tmp += str.substr(5);
                $("#"+id).val(tmp);
            } else {
                tmp += str.substr(0, 2);
                tmp += '-';
                tmp += str.substr(2, 4);
                tmp += '-';
                tmp += str.substr(6, 4);
                $("#"+id).val(tmp);
            }
        } else {
            if (str.length < 4) {
                $("#"+id).val(str);
            } else if (str.length < 7) {
                tmp += str.substr(0, 3);
                tmp += '-';
                tmp += str.substr(3);
                $("#"+id).val(tmp);
            } else if (str.length < 11) {
                tmp += str.substr(0, 3);
                tmp += '-';
                tmp += str.substr(3, 3);
                tmp += '-';
                tmp += str.substr(6);
                $("#"+id).val(tmp);
            } else {
                tmp += str.substr(0, 3);
                tmp += '-';
                tmp += str.substr(3, 4);
                tmp += '-';
                tmp += str.substr(7);
                $("#"+id).val(tmp);
            }
        }
    }

 

참고들 하세요!