목동코딩학원, 자바스크립트로 전화번호 입력시 자동으로 "-" 추가하는 방법

전화번호 입력시 "-"를 추가하는 방법은 다양하게 있지만, 가장 간단한 방법은 문자열을 자르고 다시 합치는 것입니다. 아래는 예시 코드입니다.

function formatPhoneNumber(number) {
  // 문자열에서 숫자만 추출합니다.
  const cleaned = ('' + number).replace(/\D/g, '');

  // 숫자를 하이픈으로 구분합니다.
  const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
  if (match) {
    return match[1] + '-' + match[2] + '-' + match[3];
  }
  
  // 형식에 맞지 않는 경우 원본 값을 그대로 반환합니다.
  return number;
}

// 사용 예시
const phoneNumber = '1234567890';
const formattedPhoneNumber = formatPhoneNumber(phoneNumber);
console.log(formattedPhoneNumber); // 출력 결과: "123-456-7890"

위 코드에서 formatPhoneNumber 함수는 전화번호를 입력받아 하이픈을 추가한 형식으로 반환합니다. cleaned 변수는 문자열에서 숫자만 추출한 결과를 담고, match 변수는 추출한 숫자를 하이픈으로 구분한 결과를 담습니다. 만약 전화번호가 형식에 맞지 않는 경우에는 원본 값을 그대로 반환합니다

​

​

아래는 onkeydown 이벤트를 이용하여 입력시 마다 표시하는 방법입니다

 <input type="text" id="phoneNumber" onkeydown="formatPhoneNumber(event);">
 <script>
// 자바스크립트 코드
function formatPhoneNumber(event) {
    var pno = document.getElementById("phoneNumber");
    var pnoValue = pno.value;
    var pnoLen = pnoValue.length;
    console.log(event + " : " + event.keyCode);

    if(event.keyCode != 8){
        if(pnoLen == 3){
            pno.value =  pnoValue + "-";
        }
        if(pnoLen == 8){
            pno.value =  pnoValue + "-";
        }
        if(pnoLen > 12){
            pno.value =  pnoValue.substring(0,12) ;
        }
    }
}
</script>

위 코드에서 input 요소에 onchange 이벤트를 추가하고, formatPhoneNumber 함수를 호출하도록 설정했습니다. formatPhoneNumber 함수는 입력된 전화번호를 가져와 문자열에서 숫자만 추출한 후, 하이픈을 추가한 형식으로 다시 input 요소에 설정합니다.

위 방법은 사용자가 입력을 마치고 포커스가 이동한 후에만 하이픈을 추가하게 됩니다. 만약 입력 중에도 실시간으로 하이픈을 추가하고 싶다면 oninput 이벤트를 사용할 수 있습니다.

목동코딩학원 : 온라인코딩교육, 유니티게임개발교육, 로블록스게임개발교육, 한국서비스산업진흥원, 플랫폼프로젝트수업,인공지능프로젝트