49

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?

Improve this question

4 Answers 4

Reset to default
98

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

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

works great! Is this part of the spec or just a strange workaround?
This works okay in Chrome but not in Firefox 31 ESR or Firefox 34. I had to resort to input="text" to get what I wanted. Firefox and HTML5 really need to get their act together.
One problem I ran into, even on Chrome is that "e" or "e.e" is can be typed into the input (because e is a number) but in Angular the value ends up as "undefined".
54

Try <input type="number" step="0.01" /> if you are targeting 2 decimal places :-).

Improve this answer

1 Comment

You deserve the point, the easiest solution and I had to search it several getting wrong almost all of them...Thx
4

Note: If you're using AngularJS, then in addition to changing the step value, you may have to set ng-model-options="{updateOn: 'blur change'}" on the html input.

The reason for this is in order to have the validators run less often, as they are preventing the user from entering a decimal point. This way, the user can type in a decimal point and the validators go into effect after the user blurs.

Improve this answer

Comments

1

Try this 

<input onkeypress='return event.charCode >= 48 && 
                          event.charCode <= 57 || 
                          event.charCode == 46'>

Improve this answer

1 Comment

&& !isNaN(this.value) perhaps or this.value.split('.').length==1

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.