Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML 5 input type="number" element for floating point numbers on Chrome

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?

like image 844
at. Avatar asked Mar 26 '14 07:03

at.


People also ask

Is there a float input type in HTML5?

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.

How do you add numbers in HTML5?

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.

Which input type in HTML5 can contain only a numeric value?

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.


1 Answers

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

like image 63
Gilles V. Avatar answered Oct 01 '22 03:10

Gilles V.