input type="number" with currency formatting (thousands delimiters)

Question

This has already been asked numerously and lots of examples have been provided, either with tons of JavaScript, or using the {this.props.items.map((item, i) => item.text.map((text, i) => <li key={i}>{item.text[i]}</li>))} or the inputmode attribute with some regex. However, none of these seem to work together with the numeric keyboard (at least not on my iPhone).

Therefore my question: is this impossible? (in plain and simple HTML5)

I need an pattern for currency with on-the-fly formatting, to edit numbers like this: <input> or, when changing the country, to 1,000,000.00 AND the numeric keyboard appears (important for mobiles). Notice the thousands separators.

Answer 1

今天只有HTML5不起作用。 （2016年6月6日）

你想要的是这样的：

<input type="text" pattern="your-pattern" inputmode="numeric">

但是，任何浏览器都不支持inputmode。

上面的代码解释了：

• 我们无法使用type="number"，因为该类型不支持pattern属性，因此我们使用type="text"。更好的选择可能是type="tel"，因为它还涉及数字和分隔符。但是，我不知道这个的语义含义（对于实例的SEO和屏幕阅读器）。最安全的方法是text
• inputmode是新的，允许您指定所需的输入模式类型。对于移动设备特别有用，正如您可以想象的那样

考虑到您希望从一种标准符号转换到另一种标准符号，您必须使用JavaScript，因此如果您真的想使用number类型，则可以将其用于模式验证。或者甚至可能有另一个公共API通过JS控制键盘（但我怀疑它，可能会导致安全问题）。

最后，一如既往：如果您的验证很重要，请在服务器端进行。永远不应该信任客户端。 （即使他们有饼干。）