개발노트
목록
[js] 전화번호 입력받을 때 숫자만 입력받고 자동으로 하이픈 표시
전화번호하이픈입력박스규칙설정
Javascript 2024.04.11 80 회 읽음
Javascript 24.04.11 80

전화번호 텍스트를 input 박스에서 입력 받을 때 불필요한 문자 입력을 막고 정형화된 형식을 입력하게 되면 필터링이 필요 없고 정확한 데이터를 얻는데 도움이 됩니다.

다양한 소스 코드가 있지만 코드가 길지 않고 간편하게 사용할 수 있는 스크립트를 안내 하고자 합니다.

아래와 같이 특수 문자 없이 숫자만 입력하면 자동으로 하이픈이 입력됩니다.


아래와 같이 소스를 통해 사용할 수 있습니다.

Class에 phoneNumber 항목을 추가합니다.
<input type="tel" class="phoneNumber" id="mobile" name="mobile" value="">
/*javascript*/
/*키가 눌러질 때 .phoneNumber 클래스객체에서 실행하는 스크립트*/
$(document).on("keyup", ".phoneNumber", function() {
    $(this).val( $(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-") ); 
});



목록