HTML5 : 정수만 사용하는 숫자 입력 유형?


249

jQuery를 통해 HTML5 유효성 검사를 구현 하는 jQuery Tools Validator 를 사용하고 있습니다. 한 가지를 제외하고 지금까지 훌륭하게 작동했습니다. HTML5 사양에서 입력 유형 "number"는 정수와 부동 소수점 숫자를 모두 가질 수 있습니다. 데이터베이스 필드에 부호있는 부동 소수점 숫자가있을 때만 유용한 유효성 검사기이기 때문에 엄청나게 근시안적입니다. 이를 지원하는 브라우저의 화살표). 입력을 부호없는 정수로 제한하는 다른 입력 유형이나 속성이 있습니까? 고마워요

편집하다

좋아, 여러분 시간과 도움에 감사하지만, 과분한 많은 투표가 진행되고 있습니다. : D. 단계를 1로 설정하면 입력이 제한되지 않으므로 답이 아닙니다. 텍스트 상자에 음의 부동 소수점 숫자를 입력 할 수 있습니다. 또한 패턴 유효성 검사 (원래 게시물에서 언급)에 대해 알고 있지만 질문의 일부는 아닙니다. HTML5에서 "숫자"유형의 입력을 양의 정수 값으로 제한 할 수 있는지 알고 싶었습니다. 이 질문에 대한 답은 "아니오, 그렇지 않을 것"입니다. jQuery Tools 유효성 검사를 사용할 때 약간의 단점이 있기 때문에 패턴 유효성 검사를 사용하고 싶지 않았지만 이제는 사양에서 더 깔끔한 방법을 허용하지 않는 것 같습니다.


3
2019 년부터 (언제나 알지 못함) number입력 값 (최소한 FF / Chrome / Safari)은 이제 10 진수 값을 허용 하는 attr에 명시적인 값을 설정 하지 않는 한 기본적으로 정수만 step허용합니다. 예 : step="0.01". 여기에 MDN이 문서화되어 있습니다 . 나는 이것이 합리적인 기본값이라고 생각하기 때문에 두 가지 생각을 할뿐만 아니라 주요 변경 사항 (예, 내가 작성한 일부 코드에 영향을 미쳤습니다).
Darragh Enright

답변:


326

https://www.w3.org/wiki/HTML/Elements/input/number

HTML로만 달성 할 수있는 최고

<input type="number" min="0" step="1"/>


6
당신은 아마 설정해야합니다 min1그가 양수 (비 음수가 번호)하고자한다.
Martin Thoma

1
@ pwdst 두 번째로 할게요. <input type="number" min="0" step="1"/>질문에 대한 가장 정답입니다. 어쨌든, 모두 가지고있는 점 무엇 step="1"pattern="\d+"? 두 경우 모두 부동 소수점 숫자를 입력 할 수 없습니다.
Danish Ashfaq

27
최신 버전의 크롬에서는 작동하지 않았습니다. 문자를 입력 할 수는 없지만 특수 문자를 삽입 할 수 있습니다.
Malavos

2
내가 e를 입력 할 수있는 이유
grant sun

3
지수 번호는 @grantsun입니다 (예 : 10e20).
sn3ll

180

step속성을 1다음으로 설정하십시오 .

<input type="number" step="1" />

이것은 현재 Chrome에서 약간 버그가있어 현재로서는 최상의 솔루션이 아닐 수 있습니다.

더 나은 해결책은 pattern입력을 일치시키기 위해 정규 표현식을 사용하는 속성을 사용하는 것입니다.

<input type="text" pattern="\d*" />

\d숫자의 정규식으로, *둘 이상의 숫자를 허용 함을 의미합니다. 데모는 다음과 같습니다. http://jsfiddle.net/b8NrE/1/


2
JayPea가 배운대로 모든 브라우저가 아직 모든 HTML5 요소를 지원하는 것은 아니므로 제안한대로 정상적으로 성능이 저하되는 것이 가장 좋습니다.
DOK

6
@Zut HTML5 유효성 검사로 인해 해당 키를 입력하지 않아도됩니다. 양식이 해당 문자와 ​​함께 전송되는 것을 방지합니다. number다른 문자가 포함 된 유형의 입력이있는 양식을 제출하면 Chrome에 오류 메시지가 표시됩니다.
js-coder

2
@dotweb-요점을 봅니다. 둘의 차이점은 숫자 속성을 사용하면 입력에 대해 (선택 취소)를 선택 취소하면 모든 알파벳 문자가 자동으로 제거된다는 것입니다. pattern 속성을 사용할 때는 발생하지 않습니다. 이 차이는 AJAX를 사용하여 데이터를 게시 submit하고 게시물을 트리거하는 것 이외의 다른 이벤트를 사용하는 경우에만 중요합니다 .
ut

6
이것은 OP가 요청한 것을 수행하지 않습니다. 정수만 /\d*/.test(1.1) // true
vsync

2
@vsync는 pattern="\d*"동일하지 않다 /\d*/, pattern="\d*"같음 /^(?:\d*)$/을 참조하면 HTML5 패턴 속성 문서 .
Wiktor Stribiżew

37
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

이 코드를 사용하면 텍스트 필드에 대한 입력이 숫자 만 입력하도록 제한됩니다. 패턴은 HTML 5에서 사용할 수있는 새로운 속성입니다.

패턴 속성 doc


9
에 따르면 사양 패턴 속성이 입력 유형 인 경우에만 사용할 수 있습니다 텍스트, 검색, URL, 전화, ( "텍스트"유형의 그림과 같이) 이메일, 비밀번호. 즉,이 방법을 사용하면 숫자 입력 유형의 의미, 따라서 일부 태블릿 및 휴대폰의 숫자 화면 키보드의 의미가 손실됩니다.
pwdst

3
firefox 36.0에서는 글자와 특수 문자를 입력 할 수 있습니다.
Malavos

입력은 숫자로만 제한되지 않으며 여전히 문자를 입력 할 수 있습니다!
HadidAli

35

JavaScript를 사용하는 쉬운 방법 :

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

이해가 replace(/(\..*)\./g, '$1')
안가요

3
부동 소수점을 받아들이고 .한 번만 반복하는 것이 중요합니다 ( 예 : 쓰기 123.556가능).
Tarek Kalaji

8
@TarekKalaji-질문은 정수 가 아니라 정수를 나타 냅니다
vsync

휴대 기기는 어떻습니까? 유형 텍스트는 모든 키보드를 표시하기 때문에 (알파벳 문자)
누리 YILMAZ

27

패턴은 좋지만 type = "text"로만 입력을 숫자로 제한하려면 다음과 같이 oninput과 정규식을 사용할 수 있습니다.

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

나는 나를 위해 warks :)


이 접근 방식은 (변경) 메소드 (이벤트 핸들러)를 무효화하고 입력 상자에서 기본값을 지울 수 있습니다.
HadidAli

14

이것은 모든 브라우저가 정상적으로 작동하는 html5뿐만 아니라 이 시도

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"

12
이것은 나쁘다. 입력 시도시 : Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V. 사용 oninput대신에
zanderwar

1
이 답변을 작성할 때 HTML5가 게시되지 않았습니다. @zanderwar
Muhammet 수 TONBUL

11

패턴은 항상 제한을 위해 선호되며, 1부터 숫자 만 입력하려면 1을 시도 oninput하고 min발생하십시오.

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

매우 흥미로운 솔루션입니다. `value = $ {var}`는 무엇입니까?
개발자

해당 입력에 대한 @AcademyofProgrammer 예제 기본값
Shinigamae

가장 좋은 답변! 붙여 넣기를 위해 작동하고 IE (10+)에서도 작동하며 입력 유형을 통해 키보드를 자유롭게 표시 할 수 있으며 크롬을 사용하여 필드 내부의 성가신 위 / 아래 화살표를 표시하지 않습니다.
Janosch

5

step속성을 1로 설정 해 보셨습니까?

<input type="number" step="1" /> 


3

예, HTML5는 그렇습니다. 이 코드를 사용해보십시오 ( w3school ).

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

최소 및 최대 파레 미터를 보시겠습니까? Chrome 19 (작동) 및 Firefox 12 (작동하지 않음)를 사용하여 시도했습니다.


이것은 알려진 범위를 원한다고 가정합니다. 당신이 원하는하지만 어떤 정수 값이 여전히 작동까요?
RandomHandle

3

입력 필드에 넣으십시오. onkeypress='return event.charCode >= 48 && event.charCode <= 57'


3

html 속성을 사용하더라도 Chrome에서 일하고 있었고 몇 가지 문제가있었습니다. 이 js 코드로 끝났습니다.

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});

나는 이것을 약간의 조정으로도 사용했다. parseInt (value)를 parseInt (value.replace ( '.', '')로 변경했습니다. 이렇게하면 1.56을 붙여서 표시된 값을 1 대신 156으로 유지할 수있었습니다.
codescribblr


2

사양에서

step="any"또는 양의 부동 소수점 숫자
요소 값의 값 세분성을 지정합니다.

따라서 간단히 다음과 같이 설정할 수 있습니다 1.


8
나는 이것을 시도했지만 문제는 여전히 텍스트 상자에 부동 소수점 숫자를 입력 할 수 있다는 것입니다.
JayPea

따라서 사용자가 소수점을 입력하지 못하게하는 코드가 필요합니까?
Blazemonger

2

설정 step모든 float 번호, 예를 들어 0.01 속성과 당신은 갈 수 있습니다.


1
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});

0

현재는 사용자가 HTML로만 입력에 10 진수 값을 쓰지 못하게 할 수 없습니다. 자바 스크립트를 사용해야합니다.



-2

Future ™ ( 사용 가능 참조 )에서 키보드를 제공하는 사용자 에이전트에서을 사용 하여 텍스트 입력을 숫자로만 제한 할 수 있습니다 input[inputmode].


inputmode대부분 핸드 헬드 장치 용이며 올바른 키보드 레이아웃을 트리거하지만 키보드가있는 "일반"컴퓨터의 경우 원하는 것을 입력하지 못하게됩니다.
vsync
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.