javascript - 强制使用自定义/货币模式的 iOS 数字键盘

Question

是否有可能强制 iOS 设备显示数字键盘同时使用自定义模式作为输入类型？

我的输入模式:

<input id="price" class="numeric" pattern="\d+((\.|,)\d{1,2})?" name="price" 
title="" data-mini="true" data-clear-btn="true" autocomplete="off" autofocus />

我想输入一个货币值，例如“14.99”，并在 iOS 设备上显示一个可以访问数字的键盘

<input type='number' />
<input pattern='[0-9]*' />
<input pattern='[\d]*' />

都缺少小数点符号和/或在添加小数点符号时未验证为数字。另一种方法可能是在正确位置创建小数点的 javascript 函数，例如按此顺序按 1->2->9->9 在 keypress() 上创建 0.01->0.12->1.29->12.99， 但这需要输入字段为 type='text' --> 这里明显的问题是在聚焦输入字段时显示文本键盘。

我该如何解决这个问题？

编辑

环境:

• JQM 1.3.2
• jquery 1.8.2

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

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

看起来 Mobile Safari 支持新的 HTML5 输入类型属性 email、number、search、tel 和 url。这些将切换显示的键盘。请参阅类型属性。

例如，您可以这样做:

<input type="number" />

当输入框获得焦点时，会显示数字键盘(就好像用户拥有完整的键盘并点击“123”按钮一样。

如果您真的只想要数字，您可以指定:

<input type="tel" />

然后用户会得到电话号码拨号键盘。

我知道这适用于 Mobile Safari——我只是假设它适用于 UIWebView。

http://conecode.com/news/2011/12/mobile-safari-uiwebview-input-types/