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>
_x000D_
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?
This question is related to
html
input
floating-point
You can use:
<input type="number" step="any" min="0" max="100" value="22.33">
Based on this answer
<input type="text" id="sno" placeholder="Only float with dot !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 46 || event.charCode == 0 ">
Meaning :
Char code :
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Backspace
(otherwise need refresh page on Firefox)dot
&&
is AND
, ||
is OR
operator.
if you try float with comma :
<input type="text" id="sno" placeholder="Only float with comma !"
onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||
event.charCode == 44 || event.charCode == 0 ">
Supported Chromium and Firefox (Linux X64)(other browsers I does not exist.)
You can use the step attribute to the input type number:
<input type="number" id="totalAmt" step="0.1"></input>
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; ...
This topic (e.g. step="0.01"
) relates to stepMismatch and is supported by all browsers as follows:
I have started using inputmode="decimal"
which works flawlessly with smartphones:
<input type="text" inputmode="decimal" value="1.5">
Note that we have to use type="text"
instead of number
. However, on desktop it still allows letters as values.
For desktop you could use:
<input type="number" inputmode="decimal">
which allows 0-9
and .
as input and only numbers.
Note that some countries use ,
as decimal dividor which is activated as default on the NumPad. Thus entering a float number by Numpad would not work as the input field expects a .
(in Chrome). That's why you should use type="text"
if you have international users on your website.
You can try this on desktop (also with Numpad) and your phone:
<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">
_x000D_
Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
Using React on my IPad, type="number"
does not work perfectly for me.
For my floating point numbers in the range between 99.99999 - .00000 I use the regular expression (^[0-9]{0,2}$)|(^[0-9]{0,2}\.[0-9]{0,5}$)
. The first group (...)
is true for all positive two digit numbers without the floating point (e.g. 23), |
or e.g. .12345 for the second group (...)
. You can adopt it for any positive floating point number by simply changing the range {0,2}
or {0,5}
respectively.
<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"
/>
I do so
<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">
then, I define min in 0.4 and max in 0.7 with step 0.01: 0.4, 0.41, 0,42 ... 0.7
<input type="number" step="any">
This worked for me and i think is the easiest way to make the input field accept any decimal number irrespective of how long the decimal part is. Step attribute actually shows the input field how many decimal points should be accepted. E.g, step="0.01" will accept only two decimal points.
Via: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/
But what if you want all the numbers to be valid, integers and decimals alike? In this case, set step to “any”
<input type="number" step="any" />
Works for me in Chrome, not tested in other browsers.
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).
Source: Stackoverflow.com