HTML 입력 태그가 숫자 값만 허용하도록하는 방법은 무엇입니까?

143

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

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

html  input  numbers  validating 
— Chiel Ten Brinke
소스
— alexblum
2
충분한 정보가있는이 [link] [1]을 살펴보십시오. [1] : stackoverflow.com/questions/469357/…
— Maheshkumar
이것도 유용 할 것입니다 : stackoverflow.com/questions/995183/…
— Chiel ten Brinke
— emkey08

답변:

282

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/

— 바이러스 성 Patel
소스
6
네, 이것은 파이어 폭스와 크롬 모두에서 저에게 효과적입니다. 그런 간단한 일에는 js가 필요하다는 것이 이상합니다.
— Chiel ten Brinke
7
크롬 30에서는 작동하지 않습니다. 바이올린의 "숫자"입력에 문자를 입력하는 데 전혀 문제가 없습니다. 흠 ...
— 벤
2
누군가가 8.9와 같은 부동 소수점 값을 입력하려면 어떻게해야합니까?
— syed shah
6
보다 강력한 솔루션을 위해 복사 및 붙여 넣기를 사용하여이 예제에 문자를 추가 할 수 있습니다.
— Neil
3
죄송합니다 !! 첫 줄은 다음과 같이 변경되어야합니다 :var charCode = (evt.which) ? evt.which : evt.keyCode;
— peiman F.
33

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

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

입력 검증 튜토리얼

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

— 마틴
소스
3
파이어 폭스는 숫자가 아닌 문자를 입력 할 때 입력 상자에 빨간색 테두리를 표시하지만 파이어 폭스와 크롬 모두에서 입력 상자에 숫자가 아닌 문자를 입력 할 수 있습니다.
— Chiel ten Brinke
페이지에서 어떤 doctype을 사용하고 있습니까?
— martincarlin87
좋아, 아마도 사용중인 브라우저 버전에서 지원되지 않습니까? 100 % 확실하지만 그 순간에 HTML5에 전적으로 의존하지 않을, 내가 aswell 검증하기 위해 몇 가지 JS를 사용하는 거라고 솔직히
— martincarlin87
7
속성을 사용하면 숫자를 입력 할 수 있지만 양식을 제출할 수는 없습니다.
— My1
1
유효성 검사 만 제출하십시오!
— Eric Hodonsky
16

빠르고 쉬운 코드

<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)))" />
— 아 비지트 비자 얀
소스
13

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

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

잘 작동합니다.

— Subindas 오후
소스
백 스페이스를 삭제하는 방법?
— 6by3
7

을 사용할 수 있습니다 <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 이상)
— 스타 빔
소스
1
크롬에서는 잘 작동하지만 파이어 폭스에서는 작동하지 않습니다.
— Chiel ten Brinke
아 파이어 폭스는 input type = number를 지원하지 않기 때문입니다. 또는 사용자가 텍스트를 입력 할 때 일부 자바 스크립트를 사용하여 입력의 유효성을 검사 할 수 있습니다. 답변이 업데이트되었습니다.
— starbeamrainbowlabs
jsfiddle.net/VmtF5 의 jscript 도 작동하지 않습니다. 1 자리가 문자의 시작 부분에 있어도 유효성 검사에 실패합니다. jsfiddle에서 직접 체험 해보세요
— Akshay
@aarn 그것은 나를 위해 작동합니다 ( i.imgur.com/AWdmEov.png 참조 ), 어떤 브라우저를 사용하고 있습니까?
— starbeamrainbowlabs
@starbeamrainbowlabs 파이어 폭스를 사용하고 있습니다. 또한, 6abc 입력, 그것은 당신에게 오류가 표시되지 않습니다
— 하기 Akshay
5 
<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" />

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

— 프레드릭 가우스
소스
.5 또는 .3과 같은 입력을 넣는 기능을 어떻게 추가 하시겠습니까?
— user3591637
그런 다음 현재 입력과 누른 키의 값을 확인하여 수행 할 수있는 첫 번째 및 두 번째 문자 ( 0.43또는 .43) 를 고려해야 합니다. 이것은 한 줄짜리 코드에서 추한 것이므로이 기능을 사용하는 것이 좋습니다. 정수 또는 부동 소수점을 테스트하려면 여기를 확인 하십시오 .
— Fredrick Gauss 8
1
실수로 입력 한 번호는 삭제할 수 없습니다
— Chris Sim
5

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

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">
스 니펫 확장

— kt 티쉬
소스
1
그래서 정규식을 좋아합니다. 고마워, 너 정말 내 하루를 구했어
— Nirmal
4 
<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup 키에서 손을 떼면 트리거됩니다.

isNaN(parseFloat(value))? 입력 값이 숫자가 아닌지 확인합니다.

숫자가 아닌 경우 값은 1000으로 설정됩니다 :. 숫자이면 값이 값으로 설정됩니다.

참고 : 어떤 이유로 든 작동합니다.type="number"

더 나가기 위해 경계를 만들 수도 있습니다.

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

즐겨!

— 사용자 40521
소스
4

나는 이것과 조금 싸웠다. 여기와 다른 곳의 많은 솔루션이 복잡해 보였습니다. 이 솔루션은 HTML과 함께 jQuery / javascript를 사용합니다 .

    <input type="number" min="1" class="validateNumber">

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });

필자의 경우 최소값 1로 소량을 추적했기 때문에 입력 태그에서 min = "1"이고 isNaN () 검사에서 abc = 1입니다. 양수 만있는 경우 해당 값을 0으로 변경하고 입력 태그에서 min = "1"을 제거하여 음수를 허용 할 수도 있습니다.

또한 이것은 여러 상자에서 작동하며 ID로 개별적으로 수행하는 데 약간의로드 시간을 절약 할 수 있습니다. 필요한 경우 "validateNumber"클래스를 추가하십시오.

설명

parseInt ()는 기본적으로 정수 값이 아닌 NaN을 반환한다는 점을 제외하고 필요한 것을 수행합니다. 간단한 if ()를 사용하면 NaN이 반환되는 모든 경우에 선호하는 "대체"값을 설정할 수 있습니다 :-). 또한 W3는 상태 여기 NaN이의 글로벌 버전은 몇 가지 추가 교정 (Number.isNaN을 () 그렇게하지 않음) 제공합니다 확인하기 전에 캐스트를 입력 한 것입니다. 서버 / 백엔드로 전송 된 모든 값은 여전히 ​​유효합니다!

— 이사야
소스
4 

function AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}
<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />
스 니펫 확장

JSFiddle : https://jsfiddle.net/ug8pvysc/

— 사멧 사이드
소스
1
텍스트가 포함 된 값을 붙여 넣으면 허용됩니다.
— Chris Sim
1
특수 문자도 허용합니다. 예 : á, ã, ê, ó, è 등
— AlmostPitt
3

HTML5를 사용할 수 <input type="number" /> 있다면 할 수 있다면 그렇지 않으면 코드 숨김에서 제출하지 않는다고 말한 것처럼 자바 스크립트를 통해 수행해야합니다.

<input id="numbersOnly" onkeypress='validate()' />

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i<anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i<anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}

추신 : 코드를 테스트하지는 않았지만 오타를 확인하지 않으면 다소 정확해야합니다 : D 문자열이 null이거나 비어있는 경우 수행 할 작업과 같은 몇 가지 사항을 추가하고 싶을 수도 있습니다.

— 치우 타
소스
2

정수가 아닌 경우 0을 설정

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });
— 웹 스키
소스
2

허용 된 답변 :

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

좋지만 완벽하지는 않습니다. 그것은 나를 위해 작동하지만 if 문을 단순화 할 수 있다는 경고를받습니다.

그러면 다음과 같이 보입니다.

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

원래 게시물에 댓글을 달았지만 평판이 너무 낮아서이 계정을 만들었습니다.

— 크리스 H.
소스
2

<input>속성 type = 'number'와 함께 태그를 사용할 수 있습니다 .

예를 들어 <input type='number' />

이 입력 필드는 숫자 값만 허용합니다. 이 필드에서 허용해야하는 최소값과 최대 값을 지정할 수도 있습니다.

— 게스 차 달라와 다
소스
2

JavaScript 언어 : 입력 키 필터를 사용하여 웹 페이지의 텍스트 입력 요소 값에 대한 크로스 브라우저 필터 프로젝트를 참조하십시오 . 값을 정수, 부동 수로 필터링하거나 전화 번호 필터와 같은 사용자 정의 필터를 작성할 수 있습니다. 정수 입력 코드의 예를 참조하십시오.

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Integer field</h1>
<input id="Integer">
<script>
	CreateIntFilter("Integer", function(event){//onChange event
			inputKeyFilter.RemoveMyTooltip();
			var elementNewInteger = document.getElementById("NewInteger");
			var integer = parseInt(this.value);
			if(inputKeyFilter.isNaN(integer, this)){
				elementNewInteger.innerHTML = "";
				return;
			}
			//elementNewInteger.innerText = integer;//Uncompatible with FireFox
			elementNewInteger.innerHTML = integer;
		}
		
		//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
		, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
	);
</script>
 New integer: <span id="NewInteger"></span>
</body>
</html>
스 니펫 확장

또한 입력 키 필터 예제의 "정수 필드 :" 페이지를 참조하십시오 .

— 안드레이
소스
2

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

숫자 키패드와 일반 숫자 키에서 작동합니다. 

function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
        return true;
    return false;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
— 야 시르
소스
2

입력 태그 안에 추가하십시오 : onkeyup = "value = value.replace (/ [^ \ d] / g, '')"

— 나빈 쿠마르
소스
2
SO에 오신 것을 환영합니다! 불행히도, 이것은 이미 받아 들여진 대답이있는 5 1/2 년 된 질문입니다. 당신은 여기에 답변없이 질문을 탐색 할 수 있습니다 : stackoverflow.com/unanswered
— AndroidNoobie
2

다음을 추가하기 위해 게시 된 답변을 업데이트했습니다.

  • 확장 방법으로 방법 추가
  • 한 지점 만 입력하도록 허용

  • 소수점 뒤에 몇 개의 숫자가 허용되는지 지정하십시오.

    String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 && this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};
— 플렉시 스
소스
1

나는 이것을 빠르고 쉽게 우편 번호에 사용합니다.

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>
— 저스틴 버스터
소스
1

이 코드를 사용하면 Mozilla Firefox에서 "BackSpace Button"을 사용할 수 없습니다. Chrome 47 && event.charCode <58; "pattern ="[0-9] {5} "필수>

— 웬델 알바레즈
소스
0

한 자리뿐만 아니라 여러 자리를 허용하려면 REGEX 조건에 "+"를 추가하는 것이 좋습니다.

<input type="text" name="your_field" pattern="[0-9]+">

— 대쉬 코 레오 니드
소스
0

한 가지 방법은 허용되는 문자 코드 배열을 보유한 다음이 Array.includes기능을 사용하여 입력 한 문자가 허용되는지 확인할 수 있습니다.

예:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>
— MA1
소스
0

충분히 간단합니까?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});
<input id="inputField" type="text">
스 니펫 확장

— 노르마 jean
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.