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，按下按键创建（）0.01-＆gt; 0.12-＆gt; 1.29-＆GT; 12.99，但这需要输入字段为type='text' - ＆gt;这里明显的问题是当聚焦输入字段时会显示文本键盘。

我该如何解决这个问题？

修改

环境：

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输入类型属性。这些将切换显示的键盘。请参阅type属性。

例如，你可以这样做：

<input type="number" />

当输入框有焦点时，会显示数字键盘（好像用户有完整的键盘并点击“123”按钮。

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

<input type="tel" />

然后用户将获得电话号码拨号键盘。

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

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

Answer 2

我制作了这个小片段来实现你想要的东西，我在iPhone 5 v7.0.3上进行了测试

我使用e.which来读取输入的CharCode，然后将其推入数组（之前），表示十进制标记前的数字和另一个数组（之后< / em>）将值从（之前的）数组移过小数点。

由于我谦逊的编程技巧，它可能看起来很复杂。

1）Code demo - 2）Currency conversion demo

HTML：

<input type="tel" id="number" />

JS

变量和函数：

// declare variables var i = 0, before = [], after = [], value = [], number = ''; // reset all values function resetVal() { i = 0; before = []; after = []; value = []; number = ''; $("#number").val(""); $(".amount").html(""); } // add thousand separater function addComma(num) { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }

主要代码：

// listen to keyup event $("#number").on("keyup", function (e, v) { // accept numbers only (0-9) if ((e.which >= 48) && (e.which <= 57)) { // convert CharCode into a number number = String.fromCharCode(e.which); // hide value in input $(this).val(""); // main array which holds all numbers value.push(number); // array of numbers before decimal mark before.push(value[i]); // move numbers past decimal mark if (i > 1) { after.push(value[i - 2]); before.splice(0, 1); } // final value var val_final = after.join("") + "." + before.join(""); // show value separated by comma(s) $(this).val(addComma(val_final)); // update counter i++; // for demo $(".amount").html(" " + $(this).val()); } else { // reset values resetVal(); } });

复位：

// clear arrays once clear btn is pressed $(".ui-input-text .ui-input-clear").on("click", function () { resetVal(); });

结果：

Answer 3

我认为您可以使用我建议的Ranjan相同的方法。

使用像缓冲区这样的文本字段。首先，您需要检测键盘何时出现，并检查第一响应者是否是Webview。然后你成为第一个响应者的textview。

在webview输入中设置文本时，可以添加一些逻辑来验证数字。

Here是我的示例项目与解决方案的链接，在您的情况下，您不需要更改inputView。但方法是一样的，在中间使用一个人。

Answer 4

不能评论https://stackoverflow.com/a/19998430/6437391，因此张贴为单独的答案......

这与https://stackoverflow.com/a/19998430/6437391的想法相同，但不是切换类型，而是切换的模式。

当数值与数字格式不匹配时（例如，如果值具有分隔符（1,234.56）），这具有不清除焦点上文本字段上的值的效果。

$('input[type="text"]').on('touchstart', function() {
  $(this).attr('pattern', '[0-9]*');
});

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

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

修改

4 个答案:

HTML：

JS

变量和函数：

主要代码：

复位：

结果：