在数字类型的输入中使用货币符号和逗号

Question

用于输入美元货币值的最佳 iOS 键盘（如下图所示）包括数字 0-9、十进制符号、逗号符号和美元符号。据我所知，在 Mobile Safari 上获取此键盘的唯一方法是使用<input type="number">。

不幸的是，iOS 目前有对number 输入类型的内置验证，可以屏蔽逗号和美元符号。由于此验证“功能”嵌入在浏览器中，而 Mobile Safari 尚未实现 novalidate 指令，因此目前无法手动进行此验证。

使用<input type="text"> 显然可以解决验证问题，但它也会调出常规的字母键盘，这对于我当前的项目（财务计算器）来说是不可接受的。

我即将做一些疯狂的事情，比如在 input 获得焦点后，使用 JavaScript 将 type 从 number 快速切换到 text。我在这里抓着稻草。有什么想法吗？

Answer 1

目前，JavaScript 是唯一的解决方案。这是最简单的方法（使用 jQuery）：

HTML

<input type="text">

JavaScript

$('input[type="text"]').on('touchstart', function() {
  $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

这个想法很简单。输入以type="text" 开始并以type="text" 结束，但在touchstart 事件上它会短暂变为type="number"。这会导致出现正确的 iOS 键盘。一旦用户开始输入任何输入或离开该字段，输入再次变为type="text"，从而绕过验证。

这种方法有一个缺点。当用户返回到已填写的输入时，输入将丢失（如果未验证）。这意味着用户将无法返回并编辑以前的字段。在我的情况下，这并不是那么糟糕，因为用户可能希望一遍又一遍地使用不同的值的计算器，因此自动删除输入将节省他们几个步骤。但是，这可能并不适用于所有情况。

Answer 2

您可以将属性pattern 用作输入字段的文本。这指示移动 Safari 调出数字键盘。尝试以下方式：

<input type="text" pattern="\d*" />

只需将您的模式正则表达式更改为您想要的。

这里是more information on the pattern attribute

更新 在阅读Apple's Documentation on managing Text in Webviews 之后，您似乎不走运。你将不得不做一些 javascript 魔术来做你想做的事。