HTML input type=number: min, max, step, walidacja | We.Inc
Testuj input type=number na żywo: ustaw min, max i step, odczytaj valueAsNumber i każdą flagę validity, usuń strzałki i dowiedz się, kiedy lepszym polem jest inputmode=numeric.
Używaj input type="number" dla prawdziwych wielkości, takich jak wiek, cena czy liczba sztuk. min i max ustalają dozwolony zakres, step ustala krok (domyślnie 1 albo any dla dowolnych ułamków), a valueAsNumber zwraca liczbę lub NaN, gdy pole jest puste. Dla numerów kart i kodów pocztowych użyj zamiast tego type="text" z inputmode="numeric".
Atrybuty pola liczbowego
Atrybut
Przykład
Efekt
min="0"
Niższe wartości nie przechodzą walidacji (rangeUnderflow)
max="10"
Wyższe wartości nie przechodzą walidacji (rangeOverflow)
step="0.01" or step="any"
Domyślnie 1; wartości poza krokiem nie przechodzą (stepMismatch)
Puste pole nie przechodzi (valueMissing)
list="sizes"
Podpowiada wartości z datalist
placeholder="e.g. 2"
Podpowiedź widoczna, gdy pole jest puste, nigdy zamiast etykiety
Pola liczbowe wyglądają na proste, ale zasady dotyczące kroku, pustych wartości i strzałek potrafią zaskoczyć. Ustaw atrybuty w testerze, wpisz cokolwiek w pole i obserwuj, jak surowa wartość, sparsowana liczba i każda flaga validity aktualizują się w trakcie pisania.
Wpisz wartości min, max i step. Zostaw pole puste, aby pominąć dany atrybut.
Pisz w polu testowym lub używaj klawiszy strzałek i przycisków zmiany wartości.
Odczytaj value, valueAsNumber i flagi validity w panelu obok.
Skopiuj wygenerowany HTML, gdy pole zachowuje się tak, jak chcesz.
Zawsze łącz pole z widocznym elementem label; placeholder znika, gdy tylko ktoś zacznie pisać.
Odczytuj valueAsNumber zamiast samodzielnie parsować value i przed użyciem sprawdzaj, czy nie jest NaN.
Waliduj ponownie na serwerze. Kontrole w przeglądarce pomagają ludziom, ale każdy może wysłać formularz bez nich.
Dla kwot pieniężnych step="0.01" przyjmuje grosze; dla dowolnych ułamków użyj step="any".
Nie używaj type="number" w polach takich jak numery telefonów, numery kart i kody pocztowe, gdzie strzałki nie mają sensu.
Najczęściej zadawane pytania
Dlaczego moje pole liczbowe odrzuca 1.5?
Domyślny krok to 1, więc poprawne są tylko liczby całkowite, chyba że podstawa kroku nie jest liczbą całkowitą. Dodaj step="0.5", step="0.01" lub step="any", aby przyjmować ułamki.
Co zwraca valueAsNumber dla pustego pola?
NaN. Właściwość value zwraca w tym samym przypadku pusty ciąg znaków. Możesz też ustawić valueAsNumber, aby zapisać liczbę z powrotem w polu.
Jak usunąć strzałki z pola liczbowego?
Ustaw appearance: textfield na polu input. Klawisze strzałek w górę i w dół nadal zmieniają wartość, bo appearance zmienia tylko wygląd. WebKit i Blink rysują też przyciski zmiany wartości przez pseudoelementy, które przykład poniżej również ukrywa.
Używać type=number czy inputmode=numeric?
Używaj type="number", gdy wartość jest prawdziwą wielkością, a strzałki pomagają. Używaj type="text" z inputmode="numeric" i atrybutem pattern dla ciągów cyfr, takich jak numery kart czy kody pocztowe, które są identyfikatorami, a nie kwotami.
Czy puste pole liczbowe jest poprawne?
Tak, o ile nie ma atrybutu required. Pole liczbowe jest uznawane za poprawne, gdy jest puste lub zawiera jedną poprawną liczbę.
Jak działa walidacja
Przeglądarka sprawdza pole pod kątem min, max i step i ustawia flagę w obiekcie validity dla każdej naruszonej reguły. Formularz nie zostanie wysłany, dopóki któraś flaga jest ustawiona, a :invalid pozwala nadać polu styl.
Gdy pole zawiera tekst, którego przeglądarka nie potrafi zamienić na liczbę, validity.badInput przyjmuje wartość true. Sprawdź tę flagę albo czy valueAsNumber nie jest NaN, zanim zaufasz odczytanej wartości; tester pokazuje dokładnie, co zgłasza Twoja przeglądarka.
Dostępność i urządzenia mobilne
Pole liczbowe jest prezentowane technologiom asystującym jako spinbutton. Jeśli zwiększanie i zmniejszanie nie ma sensu dla danej wartości, pole tekstowe z inputmode="numeric" zapobiega przypadkowym zmianom kółkiem myszy lub klawiszami strzałek.
Zadaj sobie pytanie, czy wartość jest kwotą, do której można coś dodać lub od której można coś odjąć. Jeśli tak, użyj pola liczbowego; jeśli to kod, który akurat składa się z cyfr, użyj pola tekstowego.
Które pole dla jakiej liczby
type=number w porównaniu z numerycznym polem tekstowym
Dane
Pole
Dlaczego
Ilość, wiek, liczba gości
type="number" min max
Prawdziwa wielkość; strzałki i kontrola zakresu pomagają