Volgens html5.org, het “waarde-kenmerk” van het invoertype “nummer”, indien gespecificeerd en niet leeg, moet een waarde hebben die een geldig drijvende-kommagetal is.”
Toch is het gewoon (in ieder geval in de nieuwste versie van Chrome), een “updown”-besturingselement met gehele getallen, geen floats:
<input type="number" id="totalAmt"></input>Antwoord 1, autoriteit 100%
Het type numberheeft een stepwaarde die bepaalt welke nummers geldig zijn (samen met maxen min) , die standaard is ingesteld op 1. Deze waarde wordt ook gebruikt door implementaties voor de stepper-knoppen (d.w.z. omhoog drukken wordt met stepverhoogd).
Verander deze waarde gewoon in wat van toepassing is. Voor geld worden waarschijnlijk twee decimalen verwacht:
<input type="number" step="0.01">
(Ik zou ook min=0instellen als het alleen maar positief kan zijn)
Als u liever een willekeurig aantal decimalen wilt toestaan, kunt u step="any"gebruiken (maar voor valuta’s raad ik u aan 0.01te gebruiken ). In Chrome & Firefox, zullen de stappenknoppen met 1 verhogen/verlagen bij gebruik van any. (dankzij het antwoord van Michal Stefanow voor het aanwijzen van any, en bekijk hier de relevante specificaties)
Hier is een speeltuin die laat zien hoe verschillende stappen verschillende invoertypen 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>Antwoord 2, autoriteit 9%
Via: http://blog .isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
Maar wat als u wilt dat alle getallen geldig zijn, gehele getallen en decimalen gelijk? Stel in dit geval stap in op “willekeurig”
<input type="number" step="any" />
Werkt voor mij in Chrome, niet getest in andere browsers.
Antwoord 3
U kunt gebruiken:
<input type="number" step="any" min="0" max="100" value="22.33">
Antwoord 4
U kunt het step-attribuut gebruiken voor het invoertypenummer:
<input type="number" id="totalAmt" step="0.1"></input>
step="any"staat elk decimaal toe.
step="1"staat geen decimalen toe.
step="0.5"staat 0,5 toe; 1; 1,5; …
step="0.1"staat 0.1; 0,2; 0,3; 0,4; …
Antwoord 5
Op basis van dit antwoord
<input type="text" id="sno" placeholder="Only float with dot !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 46 || event.charCode == 0 ">
Betekenis:
Tekencode :
- 48-57 gelijk aan
0, 1, 2, 3, 4, 5, 6, 7, 8, 9 - 0 is
Backspace(anders moet de pagina in Firefox worden vernieuwd) - 46 is
dot
&&is AND, ||is de operator OR.
als je float probeert met komma :
<input type="text" id="sno" placeholder="Only float with comma !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 44 || event.charCode == 0 ">
Ondersteunde Chromium en Firefox (Linux X64)(andere browsers bestaan niet.)
Antwoord 6
Ik doe het
<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">
Dan definieer ik min in 0,4 en max in 0,7 met stap 0,01: 0,4, 0,41, 0,42 … 0,7
Antwoord 7
Ik had net hetzelfde probleem, en ik zou het kunnen oplossen door gewoon een komma en niet een periode / volledige stop in de nummer vanwege Franse lokalisatie .
Dus het werkt met:
2 is ok
2,5 is OK
2.5 is KO (het nummer wordt beschouwd als “illegaal” en u ontvangt een lege waarde).
Antwoord 8
Ik ben begonnen met het gebruik van inputmode="decimal"die perfect werkt met smartphones:
<input type="text" inputmode="decimal" value="1.5">
Merk op dat we type="text"in plaats van number. Op Desktop maakt het echter nog steeds letters als waarden mogelijk.
Voor desktop kunt u gebruiken:
<input type="number" inputmode="decimal">
waarmee 0-9en .als invoer en alleen cijfers.
Merk op dat sommige landen ,gebruiken als decimale dividor die is geactiveerd als standaard op het numpad. Aldus zou het invoeren van een floatnummer door Numpad niet werken omdat het invoerveld verwacht een .(in Chrome). Daarom zou u moeten gebruiken type="text"als u internationale gebruikers op uw website hebt.
U kunt dit op desktop proberen (ook met numpad) en uw telefoon:
<p>Input with type text:</p>
<input type="text" inputmode="decimal" value="1.5">
<br>
<p>Input with type number:</p>
<input type="number" inputmode="decimal" value="1.5">Antwoord 9
<input type="number" step="any">
Dit werkte voor mij en ik denk dat het de gemakkelijkste manier is om het invoerveld te laten accepteren enig decimaal, ongeacht hoe lang het decimale deel is.
Stapkenmerk toont daadwerkelijk het invoerveld hoeveel decimale punten moeten worden aanvaard.
E.G, stap = “0,01” accepteert slechts twee decimale punten.
Antwoord 10
REACT OP MIJN IPAD, type="number"Werkt niet perfect voor mij.
Voor mijn zwevende puntnummers in het bereik tussen 99.99999 –.00000 gebruik ik de reguliere expressie (^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$). De eerste groep (...)is waar voor alle positieve tweecijferige getallen zonder het drijvende punt (bijvoorbeeld 23), |of b.v. .12345 voor de tweede groep (...). U kunt deze voor elk positief drijvend nummer aannemen door eenvoudig het bereik te wijzigen {0,2}of {0,5}respectievelijk.
<input
className="center-align"
type="text"
pattern="(^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)"
step="any"
maxlength="7"
validate="true"
/>
Antwoord 11
Ja, dit is het juiste antwoord:
step="any"
Dit is efficiënter. Vertrouw me.
<input type="number" step="any">Antwoord 12
Dit onderwerp (bijv. step="0.01") heeft betrekking op stepMismatch en wordt ondersteund door alle browsersals volgt:
