input에서 전화번호에 '-' 표

커서가 <input> 요소를 벗어나도 자동으로 전화번호 형식으로 변환되도록 하려면, blur 이벤트를 사용하여 입력 필드를 벗어날 때마다 자동으로 전화번호 형식으로 변환하는 함수를 호출하면 됩니다.

예를 들어, 위에서 작성한 formatPhoneNumber() 함수를 formatPhoneInput()이라는 이름의 새로운 함수로 감싸서 blur 이벤트가 발생할 때마다 호출하도록 구현할 수 있습니다.

 

<input type="text" id="phone-input" value="01071394150">

<script>
  function formatPhoneNumber(phoneNumber) {
    const cleaned = ('' + phoneNumber).replace(/\D/g, '');
    const match = cleaned.match(/^(\d{3})(\d{4})(\d{4})$/);
    if (match) {
      return match[1] + '-' + match[2] + '-' + match[3];
    }
    return phoneNumber;
  }

  function formatPhoneInput() {
    const phoneInput = document.getElementById('phone-input');
    phoneInput.value = formatPhoneNumber(phoneInput.value);
  }

  const phoneInput = document.getElementById('phone-input');
  phoneInput.addEventListener('blur', formatPhoneInput);
  formatPhoneInput();
</script>

 

위 코드에서 formatPhoneInput() 함수는 formatPhoneNumber() 함수를 호출하여 입력된 전화번호를 변환한 다음, value 속성에 변환된 전화번호를 다시 할당하는 역할을 합니다. 이 함수는 blur 이벤트가 발생할 때마다 호출되도록 addEventListener() 메서드를 사용하여 등록됩니다. 마지막으로, 입력 필드가 초기화될 때 자동으로 formatPhoneInput() 함수가 호출되도록 마지막 줄에 추가했습니다.

이 코드를 적용하면, <input> 요소에 입력된 01071394150 값이 010-7139-4150으로 자동으로 변환되고, 입력 필드를 벗어날 때마다 자동으로 전화번호 형식으로 변환됩니다.