개발자의 끄적끄적

[javascript/jquery] javascript phone number format function / 자바스크립트 휴대폰 번호 하이픈 함수 본문

개발/javascript & jquery

[javascript/jquery] javascript phone number format function / 자바스크립트 휴대폰 번호 하이픈 함수

효벨 2021. 10. 1. 02:00
728x90
반응형

[javascript/jquery] javascript phone number format function / 자바스크립트 휴대폰 번호 하이픈 함수

 

javascript 를 사용해서

 

휴대폰 번호와 같은 필드

 

입력받다보면

 

번호 규칙에 맞게 하이픈을 넣고 싶을때가 있습니다.

 

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

 

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

    if( number.length < 1 ) {
        phone= "";
    }else 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;
}

 

위 내용을 보시면 아시겠지만,

 

입력받은 값을 정규식을 통해서 숫자만 남긴뒤

 

하이픈을 계산해서

 

전달받은 오브젝트의 value 로 세팅하는 내용입니다.

 

사용법은 아래와 같습니다!

 

<input type="text" onkeyup="inputPhoneNumber(this)"/>

 

참고들 하세요!

반응형
Comments