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

숫자 입력만 허용하도록 HTML 텍스트 입력을 제한하는 방법

HTML 텍스트 입력 필드에 숫자 전용 입력을 구현하려면 JavaScript setInputFilter 기능을 활용할 수 있습니다. 이 기능은 다음을 지원하여 입력 값을 포괄적으로 필터링합니다.

• 복사 및 붙여넣기 작업
• 끌어 놓기 작업
• 키보드 단축키
• 컨텍스트 메뉴 작업
• 입력할 수 없는 키
• 캐럿 위치
• 다른 키보드 레이아웃
• 유효성 오류 메시지
• IE 9까지 모든 브라우저와의 호환성

JavaScript 코드:

// Restricts input for the given textbox to the given inputFilter function.
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(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp.
}, "Only digits and '.' are allowed");

이 예에서는 setInputFilter 함수를 "myTextBox" 요소에 사용하여 다음을 허용합니다. 숫자 값만. inputFilter 함수는 정규 표현식을 사용하여 입력이 숫자나 소수점만으로 구성되도록 합니다.

중요 사항:

• Server- 측면 검증: 클라이언트측 검증만으로는 충분하지 않습니다. 안전한 입력 처리를 위해 서버측 검증도 수행해야 합니다.
• 실행 취소 스택: 이 솔루션은 값을 직접 설정하여 실행 취소 기능을 중단합니다. 따라서 잘못된 입력에는 Ctrl Z가 작동하지 않습니다.
• 스타일 사용자 정의: 필요에 따라 "입력 오류" 클래스에 스타일을 적용할 수 있습니다.

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