3

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

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

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

我即将做一些疯狂的事情，比如使用 JavaScript在接收焦点后快速切换typefrom 。我在这里抓着稻草。有任何想法吗？numbertextinput

在此处输入图像描述

4

2 回答 2

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="number"事件touchstart。这会导致出现正确的 iOS 键盘。一旦用户开始输入任何输入或离开该字段，输入就会type="text"再次变为，从而绕过验证。

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

于 2013-04-15T06:29:09.857 回答
0

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

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

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

这是有关模式属性的更多信息

更新 阅读Apple 的关于在 Webviews 中管理文本的文档后，您似乎不走运了。你将不得不做一些 javascript 魔术来做你想做的事。

于 2013-04-15T02:32:10.490 回答