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

답변

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

자바 스크립트

JSFiddle에서 직접 사용해보십시오 .

<input>다음 setInputFilter기능 을 사용하여 텍스트의 입력 값을 필터링 할 수 있습니다 (Copy + Paste, Drag + Drop, 키보드 단축키, 상황에 맞는 메뉴 작업, 입력 할 수없는 키, 캐럿 위치, 다른 키보드 레이아웃 및 IE 9 이후의 모든 브라우저 지원 ) :

// Restricts input for the given textbox to the given inputFilter function.
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

여기에 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

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

HTML 5

HTML 5에는 다음과 같은 기본 솔루션이 있지만 ( 사양<input type="number"> 참조 ) 브라우저 지원은 다양합니다.

대부분의 브라우저는 입력 할 때가 아니라 양식을 제출할 때만 입력의 유효성을 검사합니다.
대부분의 모바일 브라우저는 지원하지 않습니다 step, min및 max특성을.
크롬 (버전 71.0.3578.98)는 여전히 사용자가 문자를 입력 할 수 있습니다 e및 E필드에. 이 질문 도 참조하십시오 .
Firefox (버전 64.0) 및 Edge (EdgeHTML 버전 17.17134) 를 사용하면 필드에 텍스트 를 입력 할 수 있습니다.

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

답변

이 DOM을 사용하십시오

<input type='text' onkeypress='validate(event)' />

그리고이 스크립트

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

답변

나는 이것에 대한 좋은 대답을 찾기 위해 오랫동안 열심히 노력했고, 우리는 필사적으로 필요 <input type="number"하지만,이 두 가지가 내가 얻을 수있는 가장 간결한 방법입니다.

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

허용되지 않는 문자가 1 초 동안 표시되지 않고 삭제되기 전에 싫어하는 경우 아래 방법이 내 해결책입니다. 수많은 추가 조건에 유의하십시오. 이는 모든 종류의 탐색 및 핫키를 비활성화하지 않기위한 것입니다. 누구든지 이것을 압축하는 방법을 알고 있다면 알려주십시오!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

답변

다음은 정확히 하나의 십진수를 허용하지만 더 이상은 허용하지 않는 간단한 것입니다.

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

스 니펫 확장

답변

그리고 또 하나의 예가 나에게 효과적입니다.

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

키 누르기 이벤트에도 연결

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

그리고 HTML :

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

다음은 jsFiddle 예제입니다

답변

HTML5에는 <input type=number>이 소리가납니다. 현재 Opera 만 기본적으로 지원하지만 JavaScript로 구현 된 프로젝트 가 있습니다.

답변

여기에있는 대부분의 대답은 모두 키 이벤트 사용의 약점을 가지고 있습니다 .

많은 답변은 키보드 매크로, 복사 + 붙여 넣기 및 더 원치 않는 동작으로 텍스트 선택을 수행하는 기능을 제한하고 다른 일부는 특정 jQuery 플러그인에 의존하는 것처럼 보입니다.

이 간단한 솔루션은 입력 메커니즘 (키 입력, 복사 + 붙여 넣기, 마우스 오른쪽 클릭 복사 + 붙여 넣기, 음성-텍스트 등)에 관계없이 크로스 플랫폼에 가장 적합합니다. 모든 텍스트 선택 키보드 매크로는 여전히 작동하며 스크립트를 통해 숫자가 아닌 값을 설정하는 기능도 제한합니다.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);