Javascript 전화번호 하이픈 자동 삽입

input type="text" 형식으로 된 input 태그에 전화번호 입력 시 앞자리 숫자에 따른 자동 하이픈 삽입이

필요하여 구현하였다.

 

Javascript

const cellNumHyphen = (target) => {

    let value = target.value;

    if (!target.value) {
        return "";
      }

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

    const result = [];
    let restNumber = "";

    // 시작번호 02
    if (value.startsWith("02")) {
        result.push(value.substr(0, 2));
        restNumber = value.substring(2);
        target.maxLength = 12;
    // 시작번호 1, 1xxx-yyyy
    }else if (value.startsWith("1")) {
        restNumber = value;
        target.maxLength = 9;
    // 나머지 3자리 지역번호, 0xx-yyyy-zzzz
    }else {
        result.push(value.substr(0, 3));
        restNumber = value.substring(3);
        target.maxLength = 13;
    }

    // 7자리만 남았을 경우, xxx-yyyy
    if (restNumber.length === 7) {
        result.push(restNumber.substring(0, 3));
        result.push(restNumber.substring(3));
    } else {
        result.push(restNumber.substring(0, 4));
        result.push(restNumber.substring(4));
    }

    target.value = result.filter((val) => val).join("-");
}

 

• value.startsWith("02")

startsWith 는 javascript prototype 으로 정의되어 있는 함수로 문자열(value)이 괄호 안

문자열로 시작하는지 확인하여 true 또는 false 를 리턴해준다.

 

 

HTML

<input type="text" class="inputbox" id="cellNum" onInput="cellNumHyphen(this)" maxlength="13" placeholder="휴대폰번호 입력">

 

onInput 속성을 통해 input type="text" 에 값을 입력할 때마다 반응하여 cellNumHyphen 함수를 호출한다.