Czy w HTML5 jest typ wprowadzania zmiennoprzecinkowego?

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?

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!

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.

Możesz użyć:

<input type="number" step="any" min="0" max="100" value="22.33">

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

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

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

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ść).