According to html5.org, the "number" input type's "value attribute, if specified and not empty, must have a value that is a valid floating point number."
Yet it is simply (in the latest version of Chrome, anyway), an "updown" control with integers, not floats:
<input type="number" id="totalAmt"></input>
Is there a floating point input element native to HTML5, or a way to make the number input type work with floats, not ints? Or must I resort to a jQuery UI plugin?
Based on this answer
Meaning :
Char code :
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Backspace
(otherwise need refresh page on Firefox)dot
&&
isAND
,||
isOR
operator.if you try float with comma :
Supported Chromium and Firefox (Linux X64)(other browsers I does not exist.)
You can use the step attribute to the input type number:
step="any"
will allow any decimal.step="1"
will allow no decimal.step="0.5"
will allow 0.5; 1; 1.5; ...step="0.1"
will allow 0.1; 0.2; 0.3; 0.4; ...I just had the same problem, and I could fix it by just putting a comma and not a period/full stop in the number because of French localization.
So it works with:
2 is OK
2,5 is OK
2.5 is KO (The number is considered "illegal" and you receive empty value).
The
number
type has astep
value controlling which numbers are valid (along withmax
andmin
), which defaults to1
. This value is also used by implementations for the stepper buttons (i.e. pressing up increases bystep
).Simply change this value to whatever is appropriate. For money, two decimal places are probably expected:
(I'd also set
min=0
if it can only be positive)If you'd prefer to allow any number of decimal places, you can use
step="any"
(though for currencies, I'd recommend sticking to0.01
). In Chrome & Firefox, the stepper buttons will increment / decrement by 1 when usingany
. (thanks to Michal Stefanow's answer for pointing outany
, and see the relevant spec here)Here's a playground showing how various steps affect various input types:
As usual, I'll add a quick note: remember that client-side validation is just a convenience to the user. You must also validate on the server-side!
Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
Works for me in Chrome, not tested in other browsers.
you can use:
hope to help, regards