HTML 입력 태그가 숫자 값만 허용하도록하는 방법은 무엇입니까? 제출되지 않으므로 제출하는 동안 유효성

특정 <input>필드는 숫자 만 값 으로 사용하도록해야합니다 . 입력이 양식의 일부가 아닙니다. 따라서 제출되지 않으므로 제출하는 동안 유효성 검사가 옵션이 아닙니다. 사용자가 숫자 이외의 다른 문자를 입력 할 수 없도록하고 싶습니다.

이것을 달성하는 깔끔한 방법이 있습니까?

답변

HTML 5

HTML5 입력 유형 번호 를 사용 하여 숫자 항목 만 제한 할 수 있습니다.

<input type="number" name="someid" />

이것은 HTML5 불만 브라우저에서만 작동합니다. html 문서의 doctype이 다음과 같은지 확인하십시오.

<!DOCTYPE html>

구형 브라우저에서의 투명한 지원에 대해서는 https://github.com/jonstipe/number-polyfill 을 참조하십시오 .

자바 스크립트

업데이트 : 이것에 대한 새롭고 매우 간단한 해결책이 있습니다.

다양한 숫자 필터를 포함 하여 텍스트에 모든 종류의 입력 필터 를 사용할 수 있습니다 <input>. 이것은 복사 + 붙여 넣기, 드래그 + 드롭, 키보드 단축키, 상황에 맞는 메뉴 작업, 입력 할 수없는 키 및 모든 키보드 레이아웃을 올바르게 처리합니다.

참조 이 대답을 하거나 스스로를 시도 JSFiddle에 .

일반적인 목적으로 아래와 같이 JS 유효성 검사를 수행 할 수 있습니다.

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

소수를 허용하려면 “if condition”을 다음과 같이 바꾸십시오.

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

출처 : HTML 텍스트 입력은 숫자 입력 만 허용

JSFiddle 데모 : http://jsfiddle.net/viralpatel/nSjy7/

답변

html5에서 패턴 속성을 사용할 수도 있습니다.

<input type="text" name="name" pattern="[0-9]" title="Title" />

입력 검증 튜토리얼

doctype이 아닌 경우 htmljavascript / jquery를 사용해야한다고 생각합니다.

답변

빠르고 쉬운 코드

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

숫자와 백 스페이스 만 사용할 수 있습니다.

소수 부분도 필요한 경우이 코드 조각을 사용하십시오.

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />

답변

입력 코드 자체와 함께이 코드를 시도하십시오

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

잘 작동합니다.

답변

을 사용할 수 있습니다 <input type="number" />. 입력 상자에 숫자 만 입력 할 수 있습니다.

예 : http://jsfiddle.net/SPqY3/

입력 type="number"태그는 최신 브라우저에서만 지원됩니다.

파이어 폭스의 경우 자바 스크립트를 사용하여 입력의 유효성을 검사 할 수 있습니다.

http://jsfiddle.net/VmtF5/

2018-03-12 업데이트 : 이제 브라우저 지원이 훨씬 향상되어 다음에 의해 지원됩니다.

  • 크롬 6 이상
  • Firefox 29 이상
  • 오페라 10.1+
  • 사파리 5+
  • 가장자리
  • (Internet Explorer 10 이상)

답변

<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

그리고 js에서 :

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

또는 복잡한 bu 유용한 방법으로 작성할 수 있습니다.

<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />

참고 : 크로스 브라우저 및 정규식은 정규식입니다.

답변

입력 값을 필요한 패턴으로 대체하기 위해 정규식을 사용했습니다.

var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}
  
<input type="text" id="numberField">

스 니펫 확장