Esiste un tipo di input float in HTML5?

Secondo html5.org , l'attributo del valore "number" del tipo di input ", se specificato e non vuoto, deve avere un valore che sia un numero a virgola mobile valido".

Eppure è semplicemente (nell'ultima versione di Chrome, comunque) un controllo "updown" con numeri interi, non float:

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

Esiste un elemento di input in virgola mobile nativo di HTML5 o un modo per far funzionare il tipo di input numerico con float, non ints? O devo ricorrere a un plug-in dell'interfaccia utente jQuery?

Il numbertipo ha un stepvalore che controlla quali numeri sono validi (insieme a maxe min), il cui valore predefinito è 1. Questo valore viene utilizzato anche dalle implementazioni per i pulsanti stepper (ovvero premendo su aumenta di step).

Cambia semplicemente questo valore in qualsiasi cosa sia appropriata. Per soldi, sono probabilmente previsti due decimali:

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

(Vorrei anche impostare min=0se può essere solo positivo)

Se preferisci consentire un numero qualsiasi di cifre decimali, puoi utilizzare step="any"(anche se per le valute, ti consiglierei di attenermi 0.01). In Chrome e Firefox, i pulsanti stepper aumenteranno / diminuiranno di 1 durante l'utilizzo any. (grazie alla risposta di Michal Stefanow per aver sottolineato anye vedere le specifiche pertinenti qui )

Ecco un parco giochi che mostra come i vari passaggi influenzano i vari tipi di input:

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

Come al solito, aggiungerò una breve nota: ricorda che la convalida lato client è solo una comodità per l'utente. È inoltre necessario convalidare sul lato server!

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

Ma cosa succede se si desidera che tutti i numeri siano validi, interi e decimali allo stesso modo? In questo caso, impostare il passaggio su "qualsiasi"

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

Funziona per me in Chrome, non testato in altri browser.

Puoi usare:

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

È possibile utilizzare l'attributo step per il numero del tipo di input:

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

step="any"consentirà qualsiasi decimale.
step="1"non consentirà alcun decimale.
step="0.5"consentirà 0,5; 1; 1.5; ...
step="0.1"consentirà 0.1; 0,2; 0,3; 0,4; ...

Sulla base di questa risposta

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

Senso :

Codice Char:

• 48-57 pari a 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
• 0 è Backspace(altrimenti serve aggiornare la pagina su Firefox)
• 46 è dot

&&è AND, ||è ORoperatore.

se provi float con virgola:

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

Supportato Chromium e Firefox (Linux X64) (non esistono altri browser.)

io faccio così

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

quindi, definisco min in 0.4 e max in 0.7 con il passo 0.01: 0.4, 0.41, 0,42 ... 0.7

Ho appena avuto lo stesso problema e ho potuto risolverlo semplicemente inserendo un virgola e non un periodo / arresto completo nel numero a causa della localizzazione in francese .

Quindi funziona con:

2 è OK

2,5 è OK

2.5 è KO (il numero è considerato "illegale" e si riceve un valore vuoto).