金钱/货币的html5输入

Question

我似乎无法弄清楚用什么来接受表格上的货币价值。

我努力了…

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

但这将不允许便士条目。

我希望增量按钮控件以磅为单位增加，但仍希望能够输入便士。

谁会想要使用一次移动 1p 的增量按钮？

也许我使用了错误的控件，但找不到货币/货币控件？

有人可以建议使用 HTML5 接受货币值（包括逗号、小数位和货币符号）的最佳方法吗？

原文由 1DMF 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为数字输入启用分数/美分/小数

要在数字输入上允许分数，您需要将 step 属性指定为 any ：

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

这将特别防止 Chrome 在输入小数/小数货币时显示错误。 Mozilla、IE 等…如果您忘记指定 step="any" ，请不要出错。 W3C 规范指出，确实需要 step=“any” 以允许小数。所以，你绝对应该使用它。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step

请注意，如果您希望向上/向下按钮执行特定粒度，则必须指定数字步长，例如“.01”。

此外，数字输入现在得到了相当广泛的支持（>90% 的用户）。

---

货币/货币有哪些输入选项？

问题的标题后来发生了变化，含义略有不同。可以同时使用数字或文本输入来接受金钱/小数。

对于货币/金钱的输入字段，建议使用数字输入类型并指定适当的属性，如上文所述。截至 2020 年，还没有针对实际输入货币类型的 W3C 规范。

主要原因是它会自动强制用户输入有效的标准货币格式并不允许任何字母数字文本。话虽如此，您当然可以使用常规文本输入并进行一些后处理以仅获取数字/十进制值（在某些时候也应该对此进行服务器端验证）。

OP 详细说明了货币符号和逗号的要求。如果你想要像那样更高级的逻辑/格式，（截至 2020 年）你需要为文本输入创建自定义 JS 逻辑或找到一个插件。

原文由 karns 发布，翻译遵循 CC BY-SA 4.0 许可协议