问题
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
回答1:
Enabling Fractions/Cents/Decimals for Number Input
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).
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 2019, 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). If you want fancier logic/formatting, you'll likely need to create custom JS logic for a text input.
回答2:
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" />
回答3:
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' />
回答4:
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 (£) 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?
回答5:
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!
回答6:
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