Esiste un tipo di input float in HTML5?


819

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?

Risposte:


1663

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!


1
Per rispondere alla modifica di @ Elfayer: le virgolette sono facoltative in HTML a meno che tu non voglia usare determinati caratteri. Personalmente preferisco ometterli ove possibile per una migliore leggibilità.
Dave,

5
Questo non funziona correttamente nelle ultime versioni di Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1003896
trpt4him

7
@Dave: Sì, tecnicamente, omettere le virgolette va bene, bit introduce una serie di potenziali problemi. Innanzitutto, un sottoinsieme di caratteri viene gestito in modo diverso nei diversi browser e versioni dello stesso. Se scegli di non usare le virgolette, devi essere costantemente consapevole di quali personaggi causeranno problemi in ogni browser e versione. È un sacco di potere mentale dedicato a qualcosa di cui non devi assolutamente preoccuparti se usi solo le virgolette. (cont.)
Chris Pratt,

9
In secondo luogo, mentre potresti star bene a preoccuparti delle regole di quali personaggi stanno bene e quali no, lo sviluppatore che ti segue probabilmente non lo sarà. Ciò richiede quindi che sopportino l'arduo compito di aggiungere virgolette a tutti gli attributi che hai lasciato non quotati o peggio, semplicemente introducono nel codice problemi di cui potrebbero persino non capire l'origine. Infine, dato che a volte si hanno a usare le virgolette, il codice è quindi in contrasto con alcuni attributi citati e altri no.
Chris Pratt,

2
@relipse vedere qui: stackoverflow.com/q/3790935/1180785 ma assicuratevi di leggere i commenti per ogni risposta; sembra che tutte le opzioni abbiano degli svantaggi e dovrai vedere cosa si adatta alle tue esigenze particolari.
Dave

153

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.


4
Chrome => Funziona perfettamente Safari => Non mostrerà un messaggio di errore, e in caso contrario non passerà al server IE => Versione inferiore a 10 no, funziona
Abhi,

4
Purtroppo in Chrome ti consente di inserire più punti decimali, ad esempio un indirizzo IP.
Andy,

18

Puoi usare:

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

12

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


8

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


Si sente indietro. Che ne dici di copia e incolla nel campo?
Mars Robertson,


4
Hack per input, hack per copia e incolla, hack su un hack = cattiva pratica. Abbiamo 2017
Mars Robertson il

Dove leggi gli input della password? A chi importa quale metodo utilizzare dopo una sessione? No, abbiamo il 1856! Prova un altro utente!
dsgdfg,

Sembra troppo complicato, ma, ragionamento su questo metodo rispetto ad altri citati non forniti
WebDude0482,

6

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


4

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


3
aggiungi lang = "en" per inserire o qualsiasi genitore e inizierà a usare lo stile numerico inglese
user1040495
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.