I need to have users enter floating point numbers, so I use the following element:
<input type="number" name="my_number" placeholder="Enter number"/>
Works great on Firefox, but Chrome complains that the number is not an integer when I try to enter a decimal. That's a problem for my case. If I enter a step
attribute, then Chrome allows the floating point number:
<input type="number" name="my_number" placeholder="Enter number" step="0.1"/>
But then the problem is 0.15 can't be entered... The step
doesn't appear to suit my needs. The W3C spec mentions floating-point numbers throughout the attributes of input type="number"
.
How do I get Chrome to accept floating point numbers without the step
attribute?
For any floating-point numbers, use type="number”, as it is widely supported and can also help to prevent random input. You can use the “any” value with step to allow any number of decimal places.
The <input type="number"> defines a field for entering a number. Use the following attributes to specify restrictions: max - specifies the maximum value allowed. min - specifies the minimum value allowed.
By default, HTML 5 input field has attribute type=”number” that is used to get input in numeric format. Now forcing input field type=”text” to accept numeric values only by using Javascript or jQuery. You can also set type=”tel” attribute in the input field that will popup numeric keyboard on mobile devices.
Try <input type="number" step="any" />
It won't have validation problems and the arrows will have step of "1"
Constraint validation: When the element has an allowed value step, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and that number subtracted from the step base is not an integral multiple of the allowed value step, the element is suffering from a step mismatch.
The following range control only accepts values in the range 0..1, and allows 256 steps in that range:
<input name=opacity type=range min=0 max=1 step=0.00392156863>
The following control allows any time in the day to be selected, with any accuracy (e.g. thousandth-of-a-second accuracy or more):
<input name=favtime type=time step=any>
Normally, time controls are limited to an accuracy of one minute.
http://www.w3.org/TR/2012/WD-html5-20121025/common-input-element-attributes.html#attr-input-step
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With