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.


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"/>


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/


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


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');" >

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 :)


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,'');"

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} >

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,



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ł).


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'


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;
});

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:


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ąć.


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

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.



-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].


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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.