HTML5: typ wprowadzania liczb, który przyjmuje tylko liczby całkowite?

249

Korzystam z jQuery Tools Validator, który implementuje sprawdzanie poprawności HTML5 poprzez jQuery. Do tej pory działało świetnie, z wyjątkiem jednej rzeczy. W specyfikacji HTML5 typ wejściowy „liczba” może mieć zarówno liczby całkowite, jak i liczby zmiennoprzecinkowe. Wydaje się to niezwykle krótkowzroczne, ponieważ będzie to użyteczny walidator tylko wtedy, gdy twoje pola bazy danych są podpisane liczbami zmiennoprzecinkowymi (w przypadku niepodpisanych liczb wewnętrznych musisz wrócić do sprawdzania poprawności „wzorca”, a tym samym utracić dodatkowe funkcje, takie jak góra i dół strzałki dla przeglądarek, które go obsługują). Czy istnieje inny typ danych wejściowych, a może atrybut, który ograniczyłby dane wejściowe do liczb całkowitych bez znaku? Nie mogłem znaleźć, dzięki.

EDYTOWAĆ

Ok, doceniam wasz czas i pomoc, ale widzę wielu niezasłużonych głosowań: D. Ustawienie kroku na 1 nie jest odpowiedzią, ponieważ nie ogranicza wprowadzania danych. Nadal możesz wpisać ujemną liczbę zmiennoprzecinkową w polu tekstowym. Jestem również świadomy sprawdzania poprawności wzoru (wspomniałem o tym w moim oryginalnym poście), ale nie było to częścią pytania. Chciałem wiedzieć, czy HTML5 pozwala na ograniczenie wprowadzania typu „liczba” do dodatnich wartości całkowitych. Wydaje się, że na to pytanie odpowiedź brzmiałaby „nie, nie ma”. Nie chciałem używać sprawdzania poprawności wzorców, ponieważ powoduje to pewne wady podczas sprawdzania poprawności narzędzi jQuery, ale wydaje się, że specyfikacja nie pozwala na czystszy sposób na zrobienie tego.

jquery html validation jquery-tools JayPea
źródło
3
Od 2019 r. - nie wiem od kiedy - dane numberwejściowe (przynajmniej w FF / Chrome / Safari) domyślnie akceptują tylko liczby całkowite, chyba że ustawisz jawną wartość stepatrybutu, która zezwala na wartości dziesiętne; np step="0.01". : Udokumentowane MDN tutaj . W dwóch myślach o tym, ponieważ uważam, że jest to rozsądna wartość domyślna, ale także przełomowa zmiana (tak, wpłynęło to na kod, który napisałem).
Darragh Enright

Odpowiedzi:

326

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

Najlepsze, co możesz osiągnąć tylko za pomocą HTML

<input type="number" min="0" step="1"/>
Rozwiń fragment kodu

Aurélien Ooms
źródło
6
Powinieneś ustawić minsię 1jak chce liczby dodatnie (i numerów nie non-ujemne).
Martin Thoma
1
@pwdst Popieram to. <input type="number" min="0" step="1"/>jest najbardziej poprawną odpowiedzią na pytanie. W każdym razie, po co mieć oba step="1"i pattern="\d+"? W obu przypadkach nie mogę wpisać liczb zmiennoprzecinkowych.
duński Ashfaq
27
Nie działało to dla mnie w najnowszej wersji chrome. Nie pozwala na wpisywanie liter, ale umożliwia wstawianie znaków specjalnych.
Malavos,
2
Dlaczego mogę wpisać e
przyznać niedz.
3
@grantsun dla liczb wykładniczych, np. 10e20.
sn3ll,
180

Ustaw stepatrybut na 1:

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

W tej chwili wydaje się to nieco wadliwe, więc może nie być to obecnie najlepsze rozwiązanie.

Lepszym rozwiązaniem jest użycie patternatrybutu, który używa wyrażenia regularnego do dopasowania danych wejściowych:

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

\djest wyrażeniem regularnym dla liczby, *oznacza, że ​​akceptuje więcej niż jeden z nich. Oto demo: http://jsfiddle.net/b8NrE/1/

koder js
źródło
2
Jak dowiedział się JayPea, nie wszystkie przeglądarki obsługują jeszcze wszystkie elementy HTML5, dlatego najlepiej zapewnić pełną degradację, tak jak zaproponowałeś.
DOK
6
Walidacja @Zut HTML5 nie powstrzymuje Cię przed wprowadzaniem tych kluczy. To po prostu uniemożliwia wysłanie formularza z tymi znakami. Jeśli prześlesz formularz z typem numberzawierającym inne znaki, Chrome wyświetli komunikat o błędzie.
js-coder
2
@dotweb - Rozumiem twój punkt widzenia. Różnica między nimi polega na tym, że przy atrybucie liczby wszystkie znaki alfabetyczne są automatycznie usuwane, gdy odznaczam (wyzwalanie rozmycia) dla danych wejściowych. Nie dzieje się tak podczas używania atrybutu wzorca. Myślę, że to rozróżnienie jest ważne tylko wtedy, gdy używasz AJAX do publikowania swoich danych i używasz innego zdarzenia niż submitwyzwalanie postu.
Zut,
6
To nie robi tego, o co poprosił OP. Tylko liczby całkowite /\d*/.test(1.1) // true
vsync,
2
@vsync pattern="\d*"to nie to samo co /\d*/, pattern="\d*"jest równe /^(?:\d*)$/, zapoznaj się z dokumentacją atrybutu wzorca HTML5 .
Wiktor Stribiżew
36 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Za pomocą tego kodu dane wejściowe w polu tekstowym ograniczają wprowadzanie tylko cyfr. Wzorzec to nowy atrybut dostępny w HTML 5.

Atrybut wzorca doc

thejustv
źródło
9
Według specyfikacji atrybut wzór może być stosowany tylko wtedy, gdy typ wejścia jest tekstem, Szukaj, URL, telefon, e-mail, hasło (jak pokazano tu z „Tekst” typu). Oznacza to, że semantyka typu wprowadzania liczb, a zatem (co ważne) numeryczne klawiatury ekranowe niektórych tabletów i telefonów są tracone podczas korzystania z tej metody.
pwdst
3
To w Firefoksie 36.0 pozwala wpisywać litery i znaki specjalne.
Malavos
Wprowadzanie nie ogranicza się tylko do liczb, nadal możesz pisać litery!
HadidAli
35

Prosty sposób przy użyciu JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
Tarek Kalaji
źródło
Nie rozumiemreplace(/(\..*)\./g, '$1')
codyc4321
3
Ważne jest, aby akceptować liczby zmiennoprzecinkowe i powtarzać .tylko raz, np. 123.556Można je zapisać.
Tarek Kalaji
8
@TarekKalaji - pytania określają liczby całkowite, a nie liczby zmiennoprzecinkowe
vsync
co z urządzeniem mobilnym? ponieważ tekst wpisz wszystkie klawiatury (także znaki alfanumeryczne)
Nuri YILMAZ
27

Wzorzec jest fajny, ale jeśli chcesz ograniczyć wprowadzanie tylko do liczb za pomocą type = "text", możesz użyć oninput i wyrażenia regularnego jak poniżej:

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

Warknę za mnie :)

Viktor Karpyuk
źródło
Uważaj, że to podejście może negować twoją (zmianę) metodę (moduł obsługi zdarzeń), a także skasować domyślną wartość w polu wprowadzania.
HadidAli,
14

Dotyczy to nie tylko HTML5, ale wszystkie przeglądarki działają poprawnie. Spróbuj tego 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
Leopard
źródło
12
To jest złe. Na wejściu spróbuj: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V. Użyj oninputzamiast tego
zanderwar
1
Kiedy ta odpowiedź została napisana, HTML5 nie został opublikowany. @zanderwar
Muhammet Can TONBUL
11

Wzór zawsze są korzystne dla ograniczenia, spróbuj oninputi minwystępować 1 do wprowadzania tylko cyfry od 1 roku

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
Noothan yv
źródło
To bardzo ciekawe rozwiązanie. Co oznacza `wartość = $ {var}`?
Deweloper
@AcademyofProgrammer przykładowa wartość domyślna dla tego wejścia
Shinigamae
najlepsza odpowiedź! działa na wklejanie, działa nawet w IE (10+), daje swobodę wyświetlania dowolnej klawiatury za pomocą typu wejścia i nie powoduje, że chrom wyświetla te irytujące strzałki w górę / w dół w polu.
Janosch,
5

próbowałeś ustawić stepatrybut na 1 w ten sposób?

<input type="number" step="1" />
DevTeamExpress
źródło
4

Może nie pasuje do każdego przypadku użycia, ale

<input type="range" min="0" max="10" />

może zrobić dobrą robotę: skrzypce .

Sprawdź dokumentację .

Luca Fagioli
źródło
3

Tak, HTML5 ma. Wypróbuj ten kod ( 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>

Widzisz minimalny i maksymalny paremeter? Próbowałem go przy użyciu Chrome 19 (działał) i Firefox 12 (nie działał).

wilsonfoz
źródło
Zakłada się, że potrzebujesz znanego zakresu. Ale jeśli chciałbyś mieć jakąś wartość całkowitą, czy to nadal działałoby?
RandomHandle
3

Wystarczy umieścić go w polu wejściowym: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

Illeas
źródło
3

Pracowałem, och, Chrome i miałem pewne problemy, mimo że używam atrybutów HTML. Skończyło się na tym kodzie js

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

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

        return true;
});
a.valchev
źródło
Skończyło się to również na 1 drobnym ulepszeniu; Zmieniłem parseInt (wartość) na parseInt (wartość.replace ('.', ''). To pozwoliło mi wkleić 1,56 i zachować wyświetlaną wartość na 156 zamiast 1
codcribblr
2

Z specyfikacji

step="any"lub dodatnia liczba zmiennoprzecinkowa
Określa ziarnistość wartości wartości elementu.

Więc możesz po prostu ustawić na 1:

David Hedlund
źródło
8
Próbowałem tego, ale problem polega na tym, że nadal możesz wpisać liczbę zmiennoprzecinkową w polu tekstowym.
JayPea,
Potrzebujesz kodu, który blokuje użytkownikowi wpisanie kropki dziesiętnej?
Blazemonger,
2

Ustaw stepatrybut na dowolną liczbę zmiennoprzecinkową, np. 0,01, i możesz zacząć.

Mantas K.
źródło
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);
    }
});
Sarthak
źródło
0

Obecnie nie można uniemożliwić użytkownikowi zapisywania wartości dziesiętnych w danych wejściowych tylko za pomocą HTML. Musisz użyć javascript.

Michał
źródło
0 

<input type="number" oninput="this.value = Math.round(this.value);"/>
Rozwiń fragment kodu

R. Yaghoobi
źródło
-2

W Future ™ (patrz: Can I Use ) w aplikacjach klienckich, które przedstawiają Ci klawiaturę, możesz ograniczyć wprowadzanie tekstu tylko do liczb input[inputmode].

weston
źródło
inputmodejest przeznaczony głównie dla urządzeń przenośnych i wyzwala prawidłowy układ klawiatury, ale w przypadku „normalnych” komputerów z klawiaturami nie przeszkadza to w wprowadzaniu czegokolwiek.
vsync