입력 폼에서 특정한 문자 또는 패턴을 입력할 수 없도록 제한하는 방법에 대해 알아보겠습니다. 주로 특수문자, 숫자 등을 제한하거나, 특정한 패턴을 입력하도록 강제하는 경우가 많습니다.

숫자만 입력하도록 제한하기

이 경우, keypress 이벤트를 사용하여 입력된 키의 유형을 확인하여 숫자가 아닌 경우 입력을 막을 수 있습니다. 이 예제에서는 JavaScript를 사용하여 이를 구현할 수 있습니다.

document.getElementById('myInput').addEventListener('keypress', function (e) {
  const key = e.key;
  if (isNaN(key)) {
    e.preventDefault();
  }
});

영문자만 입력하도록 제한하기

영문자만 입력하도록 제한하는 방법도 비슷하게 keypress 이벤트를 사용하여 구현할 수 있습니다.

document.getElementById('myInput').addEventListener('keypress', function (e) {
  const key = e.key;
  if (key.length !== 1 || !/[a-zA-Z]/.test(key)) {
    e.preventDefault();
  }
});

특정한 패턴에 맞는 입력만 허용하기

만약 특정한 패턴에 맞는 입력만을 허용하고 싶다면, 정규표현식을 사용하여 입력을 필터링할 수 있습니다. 아래는 휴대폰 번호 형식에 맞게 입력하는 것을 강제하는 예제입니다.

document.getElementById('myInput').addEventListener('input', function () {
  const inputValue = this.value;
  const phoneNumberPattern = /^\d{3}-\d{3,4}-\d{4}$/;
  if (!phoneNumberPattern.test(inputValue)) {
    this.value = '';
  }
});

위의 예제에서는 input 이벤트를 사용하여 입력된 값이 휴대폰 번호 형식에 맞지 않을 경우 입력을 지웁니다.

결론

입력 폼에서 특정한 입력을 제한하는 방법은 JavaScript의 이벤트를 이용하여 간단히 구현할 수 있습니다. 원하는 입력 제한이나 강제에 맞게 위의 예제들을 수정하여 사용할 수 있습니다.