Html 货币/货币的html5输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24163889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 input for money/currency
提问by 1DMF
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?
谁会想要使用一次移动 1p 的增量按钮？
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?
有人可以建议使用 HTML5 接受货币值（包括逗号、小数位和货币符号）的最佳方法吗？
Thanks, 1DMF
谢谢，1DMF
回答by karns
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":
为了允许在 HTML5 数字输入上使用分数（美分），您需要将“step”属性指定为 =“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.
当在输入中输入十进制/小数货币时，这将特别防止 Chrome 显示错误。Mozilla、IE 等...如果您忘记指定step="any". W3C 规范指出 step="any" 实际上应该是允许使用小数的必要条件。所以，你绝对应该使用它。
Also, the number input is now pretty widely supported (>90% of users).
此外，现在非常广泛地支持数字输入（> 90% 的用户）。
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.
对于货币/货币的输入字段，建议使用数字输入类型并指定适当的属性，如上所述。截至 2020 年，W3C 还没有针对货币或货币的实际输入类型的规范。
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.
OP 详细说明了货币符号和逗号的要求。如果您想要更高级的逻辑/格式，（截至 2020 年），您需要为文本输入创建自定义 JS 逻辑或查找插件。
回答by Travis Reeder
Try using step="0.01", then it will step by a penny each time.
尝试使用step="0.01"，那么它每次都会增加一分钱。
eg:
例如：
<input type="number" min="0.00" max="10000.00" step="0.01" />回答by vsync
Using javascript's Number.prototype.toLocaleString:
使用 javascript 的Number.prototype.toLocaleString：
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
? localStringToNumber(value).toLocaleString(undefined, options)
: ''
}input{
padding: 10px;
font: 20px Arial;
width: 70%;
}<input type='currency' value="123" placeholder='Type a number & click outside' />回答by 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.
好吧，最后我不得不通过实现 HTML5/CSS 解决方案来妥协，放弃 IE 中的增量按钮（无论如何它们在 FF 中都有点损坏！），但获得了 JQuery 微调器不提供的数字验证。虽然我不得不走一步整数。
span.gbp {
float: left;
text-align: left;
}
span.gbp::before {
float: left;
content: "<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>
a3"; /* ￡ */
padding: 3px 4px 3px 3px;
}
span.gbp input {
width: 280px !important;
}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.
跨浏览器的验证有点不稳定，其中 IE/FF 允许逗号和小数位（只要是 .00），而 Chrome/Opera 不支持，只需要数字。
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?
我想 JQuery 微调器不能使用数字类型输入是一种耻辱，但文档明确声明不要这样做:-( 我很困惑为什么数字微调器小部件允许输入任何 ascii 字符？
回答by nana janashia
We had the same problem for accepting monetary values for Euro, since <input type="number" />can't display Euro decimal and comma format.
我们在接受欧元的货币值时遇到了同样的问题，因为<input type="number" />无法显示欧元小数和逗号格式。
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.
我们想出了一个解决方案，<input type="number" />用于用户输入。用户输入值后，我们将其格式化并显示为欧元格式，只需切换到<input type="text" />. 不过，这是一个 Javascript 解决方案，因为您需要一个条件来决定“用户正在输入”和“向用户显示”模式。
Here the link with Visuals to our solution: Input field type "Currency" problem solved
这里是 Visuals 到我们解决方案的链接： 输入字段类型“货币”问题已解决
Hope this helps in some way!
希望这在某种程度上有所帮助！
