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

Question

I need to have users enter floating point numbers  so I use the following element    lt input type  number  name  my number  placeholder  Enter number   gt    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    lt input type  number  name  my number  placeholder  Enter number  step  0 1   gt    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

User · Accepted Answer

Try  lt input type  number  step  any    gt   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        lt input name opacity type range min 0 max 1 step 0 00392156863 gt         The   following control allows any time in the day to be selected  with any   accuracy  e g  thousandth-of-a-second accuracy or more         lt input name favtime type time step any gt         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

User · Answer

Try this    x000D   x000D   lt input onkeypress  return event charCode  gt   48  amp  amp   x000D                            event charCode  lt   57     x000D                            event charCode    46  gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Try  lt input type  number  step  0 01    gt  if you are targeting 2 decimal places  -

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

Examples related to html

Examples related to validation

Examples related to google-chrome

Examples related to html-input