HTML 텍스트 입력을 숫자 입력만 가능하게 하는 방법

질문 : HTML 텍스트 입력은 숫자 입력 만 허용합니다.

---

숫자 키 입력 (+ '.') 만 허용하도록 <input type=text /> )을 설정하는 빠른 방법이 있습니까?

답변

---

^{참고 : 이것은 업데이트 된 답변입니다. 아래 주석은 키 코드를 엉망으로 만든 이전 버전을 나타냅니다.}

JSFiddle에서 직접 시도해보십시오.

setInputFilter 함수를 사용하여 <input> 의 입력 값을 필터링 할 수 있습니다 (복사 + 붙여 넣기, 드래그 + 드롭, 키보드 단축키, 컨텍스트 메뉴 작업, 입력 할 수없는 키, 캐럿 위치, 다른 키보드 레이아웃 및 모든 브라우저 지원). IE 9 이후 ) :

function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

setInputFilter 함수를 사용하여 입력 필터를 설치할 수 있습니다.

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

더 많은 입력 필터 예제 는 JSFiddle 데모 를 참조하십시오. 또한 서버 측 유효성 검사를 수행해야합니다.

다음은 이것의 TypeScript 버전입니다.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

이것의 jQuery 버전도 있습니다. 이 답변을 참조하십시오.

<input type="number"> ( 사양 참조)가 포함 된 기본 솔루션이 있지만 브라우저 지원은 다양합니다.

• 대부분의 브라우저는 입력 할 때가 아니라 양식을 제출할 때만 입력을 확인합니다.
• 대부분의 모바일 브라우저 step , min 및 max 속성을 지원하지 않습니다.
• Chrome (버전 71.0.3578.98)에서는 여전히 사용자가 필드에 문자 e 와 E 를 입력 할 수 있습니다. 또한이 질문을 참조하십시오.
• 파이어 폭스 (버전 64.0) 및 에지 (EdgeHTML 버전 17.17134)는 여전히 사용자가 필드에 텍스트를 입력 할 수 있습니다.

w3schools.com에서 직접 시도해보십시오.

출처 : https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input