Czy w HTML5 jest typ wprowadzania zmiennoprzecinkowego?

816

Według html5.org atrybut wartości typu wejściowego „liczba”, jeśli jest określony i nie jest pusty, musi mieć wartość, która jest prawidłową liczbą zmiennoprzecinkową. ”

Jest to jednak po prostu (w każdym razie najnowsza wersja Chrome) kontrola „zaktualizowana” z liczbami całkowitymi, a nie zmiennoprzecinkowa:

<input type="number" id="totalAmt"></input>

Czy istnieje zmiennoprzecinkowy element wejściowy rodzimy dla HTML5, czy sposób na to, aby typ wprowadzania liczb działał z liczbami zmiennoprzecinkowymi, a nie ints? Czy muszę skorzystać z wtyczki jQuery UI?

B. Clay Shannon
źródło

Odpowiedzi:

1659

numberTypu ma stepwartość sterowania, który numery są ważne (wraz z maxa min), która domyślnie 1. Ta wartość jest również wykorzystywana przez implementacje przycisków krokowych (tj. Naciśnięcie zwiększa o step).

Po prostu zmień tę wartość na odpowiednią. W przypadku pieniędzy prawdopodobnie należy spodziewać się dwóch miejsc po przecinku:

<input type="number" step="0.01">

(Ustawiłbym również, min=0jeśli może być tylko dodatni)

Jeśli wolisz zezwolić na dowolną liczbę miejsc po przecinku, możesz użyć step="any"(choć w przypadku walut zalecamy trzymanie się 0.01). W Chrome i Firefox przyciski krokowe zwiększają / zmniejszają się o 1 podczas używania any. (dzięki odpowiedzi Michała Stefana za wskazanie anyi zobacz odpowiednią specyfikację tutaj )

Oto plac zabaw pokazujący, jak różne kroki wpływają na różne typy danych wejściowych:

<form>
  <input type=number step=1 /> Step 1 (default)<br />
  <input type=number step=0.01 /> Step 0.01<br />
  <input type=number step=any /> Step any<br />
  <input type=range step=20 /> Step 20<br />
  <input type=datetime-local step=60 /> Step 60 (default)<br />
  <input type=datetime-local step=1 /> Step 1<br />
  <input type=datetime-local step=any /> Step any<br />
  <input type=datetime-local step=0.001 /> Step 0.001<br />
  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>


Jak zwykle dodam szybką notatkę: pamiętaj, że sprawdzanie poprawności po stronie klienta to tylko wygoda dla użytkownika. Musisz także sprawdzić poprawność po stronie serwera!

Dave
źródło
1
Aby odpowiedzieć na edycję @ Elfayer: cytaty są opcjonalne w HTML, chyba że chcesz użyć pewnych znaków. Osobiście wolę je pominąć, jeśli to możliwe, dla lepszej czytelności.
Dave
5
To nie działa poprawnie w najnowszych wersjach Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1003896
trpt4him
7
@Dave: Tak, technicznie rzecz biorąc, pomijanie cytatów jest w porządku, ale wprowadza wiele potencjalnych problemów. Po pierwsze, podzbiór znaków jest obsługiwany w różny sposób w różnych przeglądarkach i ich wersjach. Jeśli zdecydujesz się nie używać cudzysłowów, musisz stale wiedzieć, które znaki będą powodować problemy w każdej przeglądarce i wersji. To dużo mocy mentalnej poświęconej czemuś, o co wcale nie trzeba się martwić, jeśli użyjesz cudzysłowów. (cd.)
Chris Pratt,
9
Po drugie, choć możesz martwić się regułami, które postacie są w porządku, a które nie, deweloper, który stoi za tobą, prawdopodobnie nie będzie. To z kolei wymaga, aby albo znosili żmudne zadanie dodawania cudzysłowów do wszystkich atrybutów, które pozostawiłeś bez cudzysłowu, albo gorzej, po prostu wprowadzali do kodu problemy, których nawet nie mogliby zrozumieć. Wreszcie, ponieważ czasami będziesz musiał użyć cudzysłowów, kod wygląda wtedy niespójnie z niektórymi cytowanymi atrybutami, a inne nie.
Chris Pratt,
2
@relipse patrz tutaj: stackoverflow.com/q/3790935/1180785, ale koniecznie przeczytaj komentarze do każdej odpowiedzi; wygląda na to, że wszystkie opcje mają wady i musisz zobaczyć, co pasuje do twoich konkretnych potrzeb.
Dave
153

Przez: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

Ale co, jeśli chcesz, aby wszystkie liczby były prawidłowe, zarówno liczby całkowite, jak i dziesiętne? W takim przypadku ustaw krok na „dowolny”

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

Działa dla mnie w Chrome, nie testowany w innych przeglądarkach.

Mars Robertson
źródło
4
Chrome => Działa idealnie Safari => Nie wyświetla komunikatu o błędzie, a jeśli nie ma numeru, nie przejdzie na serwer IE => Wersja nie mniejsza niż 10 nie działa, działa
Abhi
4
Niestety w chrome pozwala wprowadzić wiele miejsc po przecinku, na przykład adres IP.
Andy,
18

Możesz użyć:

<input type="number" step="any" min="0" max="100" value="22.33">
alvarodoune
źródło
12

Możesz użyć atrybutu step do numeru typu wejścia:

<input type="number" id="totalAmt" step="0.1"></input>

step="any"pozwoli na dowolny ułamek dziesiętny.
step="1"nie pozwoli na zapis dziesiętny.
step="0.5"pozwoli 0,5; 1; 1,5; ...
step="0.1"pozwoli 0,1; 0,2; 0,3; 0,4; ...

Andrei Thuler
źródło
8

Na podstawie tej odpowiedzi

<input type="text" id="sno" placeholder="Only float with dot !"   
   onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
   event.charCode == 46 || event.charCode == 0 ">

Znaczenie:

Kod Char:

  • 48–57 równa się 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • 0 to Backspace(w przeciwnym razie potrzebujesz odświeżenia strony w Firefox)
  • 46 jest dot

&&jest AND, ||jest ORoperatorem.

jeśli spróbujesz float z przecinkiem:

<input type="text" id="sno" placeholder="Only float with comma !"   
     onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||  
     event.charCode == 44 || event.charCode == 0 ">

Obsługiwane Chromium i Firefox (Linux X64) (inne przeglądarki nie istnieją).

dsgdfg
źródło
Czuje się zacofany. Co powiesz na kopiowanie i wklejanie w polu?
Mars Robertson,
4
Hack dla danych wejściowych, hack dla kopiowania i wklejania, hack na hack = zła praktyka. Mamy 2017
Mars Robertson
Gdzie czytasz jakieś hasła? Kogo obchodzi, której metody używa po sesji? Nie, mamy 1856! Wypróbuj innego użytkownika!
dsgdfg
Brzmi zbyt skomplikowanie, ale rozumowanie tej metody w porównaniu z innymi, o których nie wspomniano
WebDude0482
6

tak robię

 <input id="relacionac" name="relacionac" type="number" min="0.4" max="0.7" placeholder="0,40-0,70" class="form-control input-md" step="0.01">

następnie określam min w 0,4 i maks w 0,7 z krokiem 0,01: 0,4, 0,41, 0,42 ... 0,7

sadalsuud
źródło
4

Właśnie miałem ten sam problem i mogłem go naprawić, wstawiając przecinek, a nie kropkę / kropkę w numerze z powodu francuskiej lokalizacji .

Więc działa z:

2 jest OK

2,5 jest OK

2.5 to KO (liczba ta jest uważana za „nielegalną” i otrzymasz pustą wartość).

Stephane
źródło
3
dodaj lang = "en" do danych wejściowych lub dowolnego rodzica, a zacznie używać angielskiego stylu
liczbowego