Volgens html5.org, moet het "number" input type's "value attribute, indien gespecificeerd en niet leeg, een waarde hebben die een geldig drijvend komma getal is."
Toch is het gewoon (in de laatste versie van Chrome, in ieder geval), een "updown" controle met gehele getallen, niet met zwevende komma's:
<input type="number" id="totalAmt"></input>
Is er een zwevende komma invoer element native aan HTML5, of een manier om het aantal input type te laten werken met vlotters, niet ints? Of moet ik mijn toevlucht nemen tot een jQuery UI plugin?
Het getal
type heeft een stap
waarde die bepaalt welke getallen geldig zijn (samen met max
en min
), die standaard op 1
staat. Deze waarde wordt ook gebruikt door implementaties voor de stepper knoppen (d.w.z. omhoog drukken verhoogt met step
).
Verander deze waarde gewoon naar de gewenste waarde. Voor geld worden waarschijnlijk twee decimalen verwacht:
<input type="number" step="0.01">
(Ik'zou ook min=0
instellen als het alleen maar positief kan zijn)
Als u liever een willekeurig aantal decimalen toestaat, kunt u step="any"
gebruiken (hoewel ik voor valuta's zou aanraden om het bij 0.01
te houden). In Chrome & Firefox, de stepper knoppen zullen verhogen / verlagen met 1 bij gebruik van any
. (met dank aan Michal Stefanow's antwoord voor het wijzen op any
, en zie de relevante spec hier)
Hier's een speeltuin die laat zien hoe verschillende stappen verschillende invoertypes beïnvloeden:
<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>
Zoals gewoonlijk, voeg ik een korte opmerking toe: vergeet niet dat client-side validatie slechts een gemak is voor de gebruiker. Je moet ook aan de server-kant valideren!
Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
Maar wat als je wilt dat alle getallen geldig zijn, zowel gehele getallen als decimalen? In dat geval, stel stap in op "any"
<input type="number" step="any" />
Werkt voor mij in Chrome, niet getest in andere browsers.
Ik had net hetzelfde probleem, en ik kon het oplossen door gewoon een komma en geen punt/volledige stop in het nummer te zetten vanwege Franse lokalisatie.
Dus het werkt met:
<input type="number" value="" />2 is OK
2,5 is OK
2,5 is KO (Het getal wordt beschouwd als "illegaal" en u ontvangt een lege waarde).