html5 input for money currency

Question

I seem unable to work out what to use for accepting monetary values on a form   I have tried      lt input type  number  min  0  max  10000  step  1  name  Broker Fees  id  broker fees  required  required  gt    But that then won t allow for pence entries   I want the incremental button control to go up in pounds  but still want the ability to enter pence   Who would want to use an incremental button that moved 1p at a time   Perhaps I m using the wrong control   but I can t find a money currency control   Can someone please advise the best way to accept monetary values  including commas  decimal places and currency symbol  using HTML5   Thanks  1DMF

User · Answer

Well in the end I had to compromise by implementing a HTML5/CSS solution, forgoing increment buttons in IE (they're a bit broke in FF anyway!), but gaining number validation that the JQuery spinner doesn't provide. Though I have had to go with a step of whole numbers.

_x000D_

span.gbp {_x000D_
    float: left;_x000D_
    text-align: left;_x000D_
}_x000D_
_x000D_
span.gbp::before {_x000D_
    float: left;_x000D_
    content: "\00a3"; /* £ */_x000D_
    padding: 3px 4px 3px 3px;_x000D_
}_x000D_
_x000D_
span.gbp input {_x000D_
     width: 280px !important;_x000D_
}

_x000D_

<label for="broker_fees">Broker Fees</label>_x000D_
<span class="gbp">_x000D_
    <input type="number" placeholder="Enter whole GBP (&pound;) or zero for none" min="0" max="10000" step="1" value="" name="Broker_Fees" id="broker_fees" required="required" />_x000D_
</span>

_x000D_

The validation is a bit flaky across browsers, where IE/FF allow commas and decimal places (as long as it's .00), where as Chrome/Opera don't and want just numbers.

I guess it's a shame that the JQuery spinner won't work with a number type input, but the docs explicitly state not to do that :-( and I'm puzzled as to why a number spinner widget allows input of any ascii char?

User · Answer

Try using step  0 01   then it will step by a penny each time    eg    x000D   x000D   lt input type  number  min  0 00  max  10000 00  step  0 01    gt  x000D   x000D   x000D

User · Answer

Using javascript s Number prototype toLocaleString   x000D   x000D  var currencyInput   document querySelector  input type  currency     var currency    GBP     https   www currency-iso org dam downloads lists list one xml      format inital value onBlur  target currencyInput       bind event listeners currencyInput addEventListener  focus   onFocus  currencyInput addEventListener  blur   onBlur    function localStringToNumber  s      return Number String s  replace    0-9 -   g         function onFocus e     var value   e target value    e target value   value   localStringToNumber value          function onBlur e     var value   e target value    var options           maximumFractionDigits   2        currency                currency        style                    currency         currencyDisplay          symbol           e target value    value    value     0         localStringToNumber value  toLocaleString undefined  options             x000D  input    padding  10px    font  20px Arial    width  70     x000D   lt input type  currency  value  123  placeholder  Type a number  amp  click outside    gt  x000D   x000D   x000D    Here s a very simple demo illustrating the above method  HTML-only   I ve made a tiny React component if anyone s interested

User · Answer

Enabling Fractions Cents Decimals for Number Input In order to allow fractions  cents  on an HTML5 number input  you need to specify the  quot step quot  attribute to    quot any quot    lt input type  quot number quot  min  quot 1 quot  step  quot any quot    gt   This will specifically keep Chrome from displaying an error when a decimal fractional currency is entered into the input  Mozilla  IE  etc    don t error out if you forget to specify step  quot any quot   W3C spec states that step  quot any quot  should  indeed  be needed to allow for decimals  So  you should definitely use it  https   developer mozilla org en-US docs Web HTML Element input number step Note that if you want the up down buttons to do a specific granularity  then you must specify a numeric step such as  quot  01 quot   Also  the number input is now pretty widely supported   gt 90  of users    What Input Options are there for Money Currency  The title of the question has since changed and takes on a slightly different meaning  One could use both number or text input in order to accept money decimals  For an input field for currency money  it is recommended to use input type of number and specify appropriate attributes as outlined above  As of 2020  there is not a W3C spec for an actual input type of currency or money  Main reason being it automatically coerces the users into entering a valid standard currency format and disallows any alphanumeric text  With that said  you could certainly use the regular text input and do some post processing to only grab the numeric decimal value  there should be server side validation on this at some point as well   The OP detailed a requirement of currency symbols and commas  If you want fancier logic formatting like that   as of 2020  you ll need to create custom JS logic for a text input or find a plugin

User · Answer

We had the same problem for accepting monetary values for Euro  since  lt input type  number    gt  can t display Euro decimal and comma format    We came up with a solution  to use  lt input type  number    gt  for user input  After user types in the value  we format it and display as a Euro format by just switching to  lt input type  text    gt   This is a Javascript solution though  cuz you need a condition to decide between  user is typing  and  display to user  modes   Here the link with Visuals to our solution  Input field type  Currency  problem solved  Hope this helps in some way

User · Answer

More easy and beautiful if you has vue js v-money-spinner

User · Answer

I stumbled across this article looking for a similar answer  I read  vsync example Using javascript s Number prototype toLocaleString  and it appeared to work well  The only complaint I had was that if you had more than a single input type  quot currency quot  within your page it would only modify the first instance of it  As he mentions in his comments it was only designed as an example for stackoverflow  However  the example worked well for me and although I have little experience with JS I figured out how to modify it so that it will work with multiple input type  quot currency quot  on the page using the document querySelectorAll rather than document querySelector and adding a for loop  I hope this can be useful for someone else    Credit for the bulk of the code is  vsync   var currencyInput   document querySelectorAll   input type  quot currency quot        for   var i   0  i  lt  currencyInput length  i            var currency    GBP      onBlur            target  currencyInput  i                currencyInput  i   addEventListener   focus   onFocus       currencyInput  i   addEventListener   blur   onBlur        function localStringToNumber  s             return Number  String  s   replace     0-9 -   g   quot  quot                 function onFocus  e             var value   e target value          e target value   value   localStringToNumber  value                   function onBlur  e             var value   e target value          var options                 maximumFractionDigits  2              currency  currency              style   quot currency quot               currencyDisplay   quot symbol quot                     e target value     value    value     0                 localStringToNumber  value   toLocaleString  undefined  options                              x000D   x000D      var currencyInput   document querySelectorAll   input type  currency            for   var i   0  i  lt  currencyInput length  i                var currency    GBP          onBlur                target  currencyInput  i                        currencyInput  i   addEventListener   focus   onFocus           currencyInput  i   addEventListener   blur   onBlur            function localStringToNumber  s                 return Number  String  s   replace     0-9 -   g                            function onFocus  e                 var value   e target value              e target value   value   localStringToNumber  value                           function onBlur  e                 var value   e target value              var options                     maximumFractionDigits  2                  currency  currency                  style   currency                   currencyDisplay   symbol                             e target value     value    value     0                     localStringToNumber  value   toLocaleString  undefined  options                                        x000D   input date       margin 1px 0px 50px 0px      font-family   Roboto   sans-serif      font-size  18px      line-height  1 5      color   111      display  block      background   ddd      height  50px      border-radius  5px      border  2px solid  111111      padding  0 20px 0 20px      width  100px    x000D       lt label for  cost of sale  gt Cost of Sale lt  label gt       lt input class  input date  type  currency  name  cost of sale  id  cost of sale  value  0 00  gt        lt label for  sales  gt Sales lt  label gt       lt input class  input date  type  currency  name  sales  id  sales  value  0 00  gt         lt label for  gm pounds  gt GM Pounds lt  label gt        lt input class  input date  type  currency  name  gm pounds  id  gm pounds  value  0 00  gt  x000D   x000D   x000D

User · Answer

x000D   x000D  var currencyInput   document querySelector  input type  currency     var currency    USD     https   www currency-iso org dam downloads lists list one xml      format inital value onBlur  target currencyInput       bind event listeners currencyInput addEventListener  focus   onFocus  currencyInput addEventListener  blur   onBlur    function localStringToNumber  s      return Number String s  replace    0-9 -   g         function onFocus e     var value   e target value    e target value   value   localStringToNumber value          function onBlur e     var value   e target value    var options           maximumFractionDigits   2        currency                currency        style                    currency         currencyDisplay          symbol           e target value   value        localStringToNumber value  toLocaleString undefined  options             x000D  input    padding  10px    font  20px Arial    width  70     x000D   lt input type  currency  value  123  placeholder  Type a number  amp  click outside    gt  x000D   x000D   x000D

[html] html5 input for money/currency

Examples related to html

Examples related to currency-formatting