金钱/货币的html5输入

Question

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

我试过...

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

但是那将不允许便士条目。

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

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

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

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

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 逻辑或查找插件。