[javascript] 입력 필드에 입력된 데이터를 실시간으로 포맷팅하는 방법은?

05 Dec 2023

javascript

HTML과 Javascript를 사용하여 입력 필드에 입력된 데이터를 실시간으로 포맷팅하는 방법을 알려드리겠습니다.

우선, HTML에서 입력 필드를 만들어야 합니다. 아래는 예시입니다.

<input type="text" id="phone-input" onkeyup="formatPhoneNumber()" placeholder="전화번호를 입력하세요">

위 코드에서 id 속성을 사용하여 입력 필드에 고유한 식별자를 부여했습니다. 또한, onkeyup 속성을 사용하여 입력 필드에서 키가 눌릴 때마다 formatPhoneNumber() 함수를 실행하도록 설정했습니다.

이제 Javascript에서 formatPhoneNumber() 함수를 만들어보겠습니다. 아래는 예시입니다.

function formatPhoneNumber() {
  const phoneNumberInput = document.getElementById('phone-input');
  let phoneNumber = phoneNumberInput.value;
  
  phoneNumber = phoneNumber.replace(/\D/g, ''); // 숫자 외의 문자 제거
  
  if (phoneNumber.length > 3 && phoneNumber.length <= 7) {
    phoneNumber = phoneNumber.replace(/(\d{3})(\d{1,4})/, '$1-$2'); // 3-4자리 포맷팅
  } else if (phoneNumber.length > 7) {
    phoneNumber = phoneNumber.replace(/(\d{3})(\d{4})(\d{1,4})/, '$1-$2-$3'); // 3-4-4자리 포맷팅
  }
  
  phoneNumberInput.value = phoneNumber;
}

위 코드에서 formatPhoneNumber() 함수는 입력 필드의 값을 가져와 phoneNumber 변수에 저장합니다. 숫자 외의 문자는 정규식을 사용하여 제거하고, 특정 조건에 따라 전화번호를 포맷팅하게 됩니다.

이제 입력 필드에서 숫자를 입력하고 키를 누를 때마다, 입력된 전화번호가 실시간으로 포맷팅되어 표시될 것입니다.