통합검색

Javascript

[Javascript] text input에 연락처 입력시 자동 하이픈(-) 처리

  • 2023.03.10 14:27:56


text input에 연락처를 입력하는 경우 자동으로 하이픈(-) 처리하는 코드.
지원되는 연락처 유형은 아래와 같다.
- 휴대전화 번호
- 02 (서울) 번호
- 000 (지역) 번호
- 0000-0000 대표번호



[!]HTML[/!] 
<input type="text" callnumber />


[!]Javascript[/!] 
$(document).on('keyup', 'input[callnumber]', function() {
    var value = $(this).val();
    if (!value) return "";
    value = value.replace(/[^0-9]/g, "");
    let result = [];
    let restNumber = "";
    // 지역번호와 나머지 번호로 나누기
    if (value.startsWith("02")) {
    // 서울 02 지역번호
    result.push(value.substr(0, 2));
    restNumber = value.substring(2);
    } else if (value.startsWith("1")) {
    // 지역 번호가 없는 경우
    // 1xxx-yyyy
    restNumber = value;
    } else {
    // 나머지 3자리 지역번호
    // 0xx-yyyy-zzzz
    result.push(value.substr(0, 3));
    restNumber = value.substring(3);
    }
    if (restNumber.length === 7) {
    // 7자리만 남았을 때는 xxx-yyyy
    result.push(restNumber.substring(0, 3));
    result.push(restNumber.substring(3));
    } else {
    result.push(restNumber.substring(0, 4));
    result.push(restNumber.substring(4));
    }
    $(this).val(result.filter((val) => val).join("-"));
});