HTML5 Number Input - Always show 2 decimal places

Question

Is there s any way to format an input type  number   value to always show 2 decimal places   Example  I want to see 0 00 instead of 0

User · Answer

This works to enforce a max of 2 decimal places without automatically rounding to 2 places if the user isn t finished typing   function naturalRound e        let dec   e target value indexOf         let tooLong   e target value length  gt  dec   3    let invalidNum   isNaN parseFloat e target value       if   dec  gt   0  amp  amp  tooLong     invalidNum         e target value   e target value slice 0  -1

User · Answer

Using the step attribute will enable it  It not only determines how much it s supposed to cycle  but the allowable numbers  as well  Using step  0 01  should do the trick but this may depend on how the browser adheres to the standard    x000D   x000D   lt input type  number  step  0 01  value  5 00  gt  x000D   x000D   x000D

User · Answer

I know this is an old question  but it seems to me that none of these answers seem to answer the question being asked so hopefully this will help someone in the future   Yes you can always show 2 decimal places  but unfortunately it can t be done with the element attributes alone  you have to use JavaScript   I should point out this isn t ideal for large numbers as it will always force the trailing zeros  so the user will have to move the cursor back instead of deleting characters to set a value greater than 9 99   x000D   x000D    Use keyup to capture user input  amp  mouse up to catch when user is changing the value with the arrows x000D          trailing-decimal-input   on  keyup mouseup   function  e    x000D   x000D             on keyup check for backspace  amp  delete  to allow user to clear the input as required x000D          var key   e keyCode    e charCode  x000D          if  key    8    key    46    x000D              return false  x000D             x000D   x000D             get the current input value x000D          let correctValue     this  val   toString    x000D   x000D             if there is no decimal places add trailing zeros x000D          if  correctValue indexOf          -1    x000D              correctValue      00   x000D            x000D   x000D          else   x000D   x000D                if there is only one number after the decimal add a trailing zero x000D              if  correctValue toString   split      1  length     1    x000D                  correctValue     0  x000D                x000D   x000D                if there is more than 2 decimal places round backdown to 2 x000D              if  correctValue toString   split      1  length  gt  2    x000D                  correctValue   parseFloat   this  val    toFixed 2  toString    x000D                x000D            x000D   x000D            update the value of the input with our conditions x000D            this  val correctValue   x000D          x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input id  my-number-input  class  form-control trailing-decimal-input  type  number  min  0 01  step  0 01  value  0 00    gt  x000D   x000D   x000D

User · Answer

If you landed here just wondering how to limit to 2 decimal places I have a native javascript solution   Javascript   function limitDecimalPlaces e  count      if  e target value indexOf         -1    return      if   e target value length - e target value indexOf        gt  count        e target value   parseFloat e target value  toFixed count           HTML    lt input type  number  oninput  limitDecimalPlaces event  2     gt      Note that this cannot AFAIK  defend against this chrome bug with the number input

User · Answer

ui-number-mask for angular  https   github com assisrafael angular-input-masks  only this    lt input ui-number-mask ng-model  valores irrf    gt    If you put value one by one      need  120 01   digit per digit     0 01    0 12    1 20    12 00    120 01 final number

User · Answer

Solved following the suggestions and adding a piece of jQuery to force the format on integers   parseFloat   this  val    toFixed 2

User · Answer

The solutions which use input  quot number quot  step  quot 0 01 quot  work great for me in Chrome  however do not work in some browsers  specifically Frontmotion Firefox 35 in my case   which I must support  My solution was to jQuery with Igor Escobar s jQuery Mask plugin  as follows   x000D   x000D    document  ready function            usd input   mask  00000 00     reverse  true         x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs jquery mask 1 14 16 jquery mask min js  integrity  sha512-pHVGpX7F 27yZ0ISY VVjyULApbDlD0 X0rgGbTqCE7WFW5MezNTWG dnhtbBuICzsd0WQPgpE4REBLv UqChw    crossorigin  anonymous  gt  lt  script gt    lt input type  text  autocomplete  off  class  usd input  name  dollar amt  gt  x000D   x000D   x000D   This works well  of course one should check the submitted value afterward     NOTE  if I did not have to do this for browser compatibility I would use the above answer by  Rich Bradshaw

User · Answer

import   Component  Pipe  PipeTransform   from   angular core     Pipe       name   replace      export class ReplacePipe implements PipeTransform       transform value  any   any           value   String value  toString            var afterPoint               var plus     00           if  value length  gt   4                if  value indexOf       gt  0                    afterPoint   value substring value indexOf       value length                   var te   afterPoint substring 0  3                   if  te length    2                        te   te    0                                               if  value indexOf       gt  0                    if  value indexOf  -      0                        value   parseInt value                       if  value    0                            value    -    value   te                          value   value toString                                              else                           value   value   te                          value   value toString                                                            else                       value   parseInt value                       value   value   te                      value   value toString                                                else                   value   value toString     plus                            var lastTwo   value substring value length - 2               var otherNumbers   value substring 0  value length - 3               if  otherNumbers                        lastTwo         lastTwo              let newValue   otherNumbers replace   B     d 3       d   g         lastTwo              parseFloat newValue               return    newValue

User · Answer

Take a look at this     lt input type  number  step  0 01    gt

User · Answer

This is a quick formatter in JQuery using the  toFixed 2  function for two decimal places    lt input class  my class selector  type  number  value  33   gt       if this first call is in   document  ready   it will run    after the page is loaded and format any of these inputs      my class selector   each format 2 dec   function format 2 dec         var curr val   parseFloat   this  val           this  val curr val toFixed 2        Cons  you have to call this every time the input number is changed to reformat it      listener for input being changed     my class selector   change function            potential code wanted after a change         now reformat it to two decimal places         my class selector   each format 2 dec         Note  for some reason even if an input is of type  number  the jQuery val   returns a string  Hence the parseFloat

User · Answer

The top answer gave me the solution but I didn t like that the user input was changed immediately so I added delay which in my opinion contributes to a better user experience  x000D   x000D  var delayTimer  function input ele        clearTimeout delayTimer       delayTimer   setTimeout function            ele value   parseFloat ele value  toFixed 2  toString           800      x000D   lt input type  number  oninput  input this   gt  x000D   x000D   x000D   https   jsfiddle net 908rLhek 1

User · Answer

This is the correct answer    x000D   x000D   lt input type  number  step  0 01  min  -9999999999 99  max  9999999999 99   gt  x000D   x000D   x000D

User · Answer

You can t really  but you a halfway step might be    x000D   x000D   lt input type  number  step  0 01  value  0 00  placeholder  0 00    gt  x000D   x000D   x000D

User · Answer

My preferred approach  which uses data attributes to hold the state of the number    lt input type  number  step  0 01   gt      react to stepping in UI el addEventListener  onchange   ev   gt  ev target dataset val   ev target value   100      react to keys el addEventListener  onkeyup   ev   gt            user cleared field     if   ev target value  ev target dataset val              non num input     if  isNaN ev key                 deleting         if  ev keyCode    8               ev target dataset val   ev target dataset val slice 0  -1          num input       else ev target dataset val    ev key      ev target value   parseFloat ev target dataset val    100

User · Answer

Based on this answer from  Guilherme Ferreira you can trigger the parseFloat method every time the field changes  Therefore the value always shows two decimal places  even if a user changes the value by manual typing a number    x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script type  text javascript  gt  x000D        document  ready function      x000D              floatNumberField   change function     x000D                this  val parseFloat   this  val    toFixed 2    x000D              x000D          x000D   lt  script gt  x000D   x000D   lt input type  number  class  floatNumberField  value  0 00  placeholder  0 00  step  0 01    gt  x000D   x000D   x000D

[html] HTML5 Number Input - Always show 2 decimal places

Examples related to html