Allow 2 decimal places in input type number

Question

I have a  lt input type  number  gt  and I want to restrict the input of the users to purely numbers or numbers with decimals up to 2 decimal places   Basically  I am asking for a price input   I wanted to avoid doing regex  Is there a way to do it    lt input type  number  required name  price  min  0  value  0  step  any  gt

User · Answer

If case anyone is looking for a regex that allows only numbers with an optional 2 decimal places

^\d*(\.\d{0,2})?$

For an example, I have found solution below to be fairly reliable

HTML:

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

JS / JQuery:

$(document).on('keydown', 'input[pattern]', function(e){
  var input = $(this);
  var oldVal = input.val();
  var regex = new RegExp(input.attr('pattern'), 'g');

  setTimeout(function(){
    var newVal = input.val();
    if(!regex.test(newVal)){
      input.val(oldVal); 
    }
  }, 0);
});

Update

setTimeout is not working correctly anymore for this, maybe browsers have changed. Some other async solution will need to be devised.

User · Answer

Try this for allowing only 2 decimal in input type   lt input type  number  step  0 01  class  form-control     gt    Or Use jQuery as suggested by  SamohtVII       ELEMENTID    blur function         this value   parseFloat this value  toFixed 2

User · Answer

You can use this  react hooks  x000D   x000D   lt input                   type  number                    name  price                    placeholder  Enter price                    step  any                    required                   gt  x000D   x000D   x000D

User · Answer

Use this code   lt input type  number  step  0 01  name  amount  placeholder  0 00  gt    By default Step value for HTML5 Input elements is step  1

User · Answer

For currency  I d suggest    lt div gt  lt label gt Amount        lt input type  number  placeholder  0 00  required name  price  min  0  value  0  step  0 01  title  Currency  pattern    d       d 1 2      onblur   this parentNode parentNode style backgroundColor    d       d 1 2      test this value   inherit   red    gt  lt  label gt  lt  div gt    See http   jsfiddle net vx3axsk5 1       The HTML5 properties  step    min  and  pattern  will be validated when the form is submit  not onblur  You don t need the step if you have a pattern and you don t need a pattern if you have a step  So you could revert back to step  any  with my code since the pattern will validate it anyways   If you d like to validate onblur  I believe giving the user a visual cue is also helpful like coloring the background red  If the user s browser doesn t support type  number  it will fallback to type  text   If the user s browser doesn t support the HTML5 pattern validation  my JavaScript snippet doesn t prevent the form from submitting  but it gives a visual cue  So for people with poor HTML5 support  and people trying to hack into the database with JavaScript disabled or forging HTTP Requests  you need to validate on the server again anyways  The point with validation on the front-end is for a better user experience  So as long as most of your users have a good experience  it s fine to rely on HTML5 features provided the code will still works and you can validate on the back-end

User · Answer

Step 1  Hook your HTML number input box to an onchange event  myHTMLNumberInput onchange   setTwoNumberDecimal    or in the HTML code   lt input type  number  onchange  setTwoNumberDecimal  min  0  max  10  step  0 25  value  0 00    gt    Step 2  Write the setTwoDecimalPlace method  function setTwoNumberDecimal event        this value   parseFloat this value  toFixed 2       You can alter the number of decimal places by varying the value passed into the toFixed   method  See MDN docs   toFixed 2      2 decimal places toFixed 4      4 decimal places toFixed 0      integer

User · Answer

just write    lt input type  number  step  0 1  lang  nb  gt    lang  nb  let you write your decimal numbers with comma or period

User · Answer

I found using jQuery was my best solution        my number field    blur function         this value   parseFloat this value  toFixed 2

User · Answer

Instead of step  any   which allows for any number of decimal places  use step   01   which allows up to two decimal places   More details in the spec  https   www w3 org TR html sec-forms html the-step-attribute

User · Answer

On input   step  any  class  two-decimals    On script       two-decimals   change function      this value   parseFloat this value  toFixed 2

[html] Allow 2 decimal places in <input type="number">

Examples related to html

Examples related to numbers