html5 input for money/currency

I seem unable to work out what to use for accepting monetary values on a form.

I have tried...

<input type="number" min="0" max="10000" step="1" name="Broker_Fees" id="broker_fees" required="required">

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

In order to allow fractions (cents) on an HTML5 number input, you need to specify the "step" attribute to = "any":

<input type="number" min="1" step="any" />

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="any". W3C spec states that step="any" should, indeed, be needed to allow for decimals. So, you should definitely use it.

Also, the number input is now pretty widely supported (>90% of users).

Travis Reeder

Try using step="0.01", then it will step by a penny each time.

eg:

<input type="number" min="0.00" max="10000.00" step="0.01" />

Using javascript's Number.prototype.toLocaleString:

var currencyInput = document.querySelector('input[type="currency"]');
var currency = 'GBP'; // https://www.currency-iso.org/dam/downloads/lists/list_one.xml

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;

  const options = {
      maximumFractionDigits : 2,
      currency              : currency,
      style                 : "currency",
      currencyDisplay       : "symbol"
  }
  
  e.target.value = value 
    ? localStringToNumber(value).toLocaleString(undefined, options)
    : ''
}

input{
  padding: 10px;
  font: 20px Arial;
}

<input style='width:70%' type='currency' placeholder='Type a number & click outside' />

1DMF

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.

span.gbp {
    float: left;
    text-align: left;
}

span.gbp::before {
    float: left;
    content: "\00a3"; /* £ */
    padding: 3px 4px 3px 3px;
}

span.gbp input {
     width: 280px !important;
}

<label for="broker_fees">Broker Fees</label>
<span class="gbp">
    <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" />
</span>

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?

We had the same problem for accepting monetary values for Euro, since <input type="number" /> can't display Euro decimal and comma format.

We came up with a solution, to use <input type="number" /> for user input. After user types in the value, we format it and display as a Euro format by just switching to <input type="text" />. 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!

I use "money" input

<input type="money" name="price" size="6" value="<?php echo $price; ?>" /> €<br/>

来源：https://stackoverflow.com/questions/24163889/html5-input-for-money-currency

标签

html5

currency-formatting