<input type="number" placeholder="Can be a value like 4.23" step="0.01">
This accepts decimal numbers, but makes the + / - controls increment by 0.01... not very user friendly. I thought perhaps something like this might work...
<input type="number" placeholder="Doesn't allow a value like 4.23" step="1.00">
However my browser (Chrome 85) just rounds this back to 1 and rejects 4.23 as invalid.
Some have suggested that using any is the solution... I disagree as I want the field to only allow a maximum of 2 decimal places.
<input type="number" placeholder="Allows 4.2333333333333" step="any">
It seems to me that the increase/decrease step function should not be coupled with the validity of the number, it should just change the way that the + and - buttons work.
I searched around and found others asking the same question, but I haven't found a resolution.
Related
My code looks like this:
<input id="tt" name="tt" type="number" value="106.00" min="0.00" step="0.01" class="form-control input-md" oninput="calc()">
Now in the calc javascript function I have tried the following:
_("tt").value=total.toFixed(2);
_("tt").value=parseFloat(total).toFixed(2);
and both times I have this weird behaviour in Firefox (and only in Firefox) that the number field can show "106.00", for instance, but instead of "106.10" it shows "106.1" , i.e., there it truncates the last zero. I want it to show "106.10" as is it a monetary value. I am a bit at a loss as to why this odd behaviour in Firefox. Does anyone have an idea how to solve this?
For a number input, is there a way to have step=1 yet allow the user to enter decimal numbers?
The reason is I want the arrows on the input box to increase/decrease the value by 1, but allow the user to enter decimals if they want to be more specific.
At the moment I have:
<input type="number" name="price" placeholder="£" step="1" id="id_price">
The arrows work as intended, but I get a validation error if 2.99 is entered, for example. Removing the step allows decimals to be entered, but the arrows now only increase/decrease by 0.01.
I am leaning towards a Javascript solution, but I was just wondering what the best solution was. Is there another option or an existing library?
<input type="number" step="any"> step any allow user to enter decimal too and increase by 1.
I have noticed that Firefox (unlike any other browser) is treating the min=".1" tag as the required decimal rather than the minimum number that can be accepted in a input type="number" box like this one:
<input id="numberInput" type="number" min=".1" value="1">
If I set it to 1 or any other whole number, a red box will appear around the input (implying the input is invalid). But if the input is changed to 1.1 or any other number ending in .1 (such as 2.1 or 10.1) it removes the red box, implying that this value checks out.
Here is a fiddle
Anyone know what is going on here?
Before you tell me, I do know that I can add step="any" to fix this "problem", but that seems like it should be unnecessary to do given that MIN is just supposed to set the floor on the input based on the HTML5 standard as described here
Is there any way to change how much a number is incremented when using the up/down arrows on a HTML number input form?
<input type="number" step="any" value="0.00000000"></input>
I'm working with tiny numbers, it would be nice if the up/down arrows incremented just 0.00000001 at a time, instead of a whole number.
0.00000000
0.00000001
0.00000002
0.00000003
Instead of
0.00000000
1
2
3
I doubt very much if there is an easy way to do this, just though I'd ask and see if anyone else has a workaround or method as I'm sure many people experience a similar issue.
Thanks,
The step attribute is for this. Your code now has the value any, which means that any values are accepted and the step size is the default, 1. Replace it by a specific number to set the granularity and the step size. Example:
<input type="number" step="0.00000001" value="0.00000000">
Note: The end tag </input> is invalid in HTML syntax for HTML5. In XHTML syntax it is allowed, but “self-closing tags” are recommended instead of it, e.g. <input type="number" step="0.00000001" value="0.00000000" />.
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?
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
Try <input type="number" step="0.01" /> if you are targeting 2 decimal places :-).
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.
Try this
<input onkeypress='return event.charCode >= 48 &&
event.charCode <= 57 ||
event.charCode == 46'>