숫자 값만 허용하도록 HTML 텍스트 입력을 제한하는 방법은 무엇입니까?

HTML 텍스트 입력 시 숫자 입력만 허용

소개

HTML 텍스트 입력을 통해 사용자는 텍스트를 입력해야 하는데 숫자만 입력하도록 제한하려면 어떻게 해야 할까요? 이는 계좌 번호나 PIN과 같은 데이터를 수집하는 데 유용할 수 있습니다.

JavaScript 솔루션

이를 달성하는 한 가지 방법은 JavaScript를 이용하는 것입니다. 다음은 숫자가 아닌 문자를 필터링하는 JavaScript 함수입니다.

function setInputFilter(textbox, inputFilter, errMsg) {
  [
    "input",
    "keydown",
    "keyup",
    "mousedown",
    "mouseup",
    "select",
    "contextmenu",
    "drop",
    "focusout",
  ].forEach(function (event) {
    textbox.addEventListener(event, function (e) {
      if (inputFilter(this.value)) {
        // Accepted value
        if ([
          "keydown",
          "mousedown",
          "focusout",
        ].indexOf(e.type) >= 0) {
          this.classList.remove("input-error");
          this.setCustomValidity("");
        }
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        // Rejected value: restore the previous one
        this.classList.add("input-error");
        this.setCustomValidity(errMsg);
        this.reportValidity();
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        // Rejected value: nothing to restore
        this.value = "";
      }
    });
  });
}

솔루션 사용

이 함수를 사용하려면 setInputFilter에 함수를 전달할 수 있습니다. 입력이 숫자인지 확인합니다.

setInputFilter(document.getElementById("numericInput"), function (value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only
}, "Only numbers and '.' allowed");

이렇게 하면 숫자 입력 텍스트 입력 필드가 제한됩니다. 숫자(및 소수점)만 허용합니다.

참고

잘못된 값이 입력된 경우 입력 오류 CSS 클래스를 적용하여 입력 필드의 스타일을 지정하는 것을 기억하세요. 입력했습니다.

위 내용은 숫자 값만 허용하도록 HTML 텍스트 입력을 제한하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!