ios - 在 iOS 上未显示数字键盘

Question

根据Apple的文档，当我设置类型为的输入元素时，number我应该得到一个数字键盘。

<input type="number"/>

number：用于指定数字的文本字段。在 iOS 3.1 及更高版本中调出数字键盘。

看起来该死的几乎不可能搞砸。但是，当我在我的 iPhone 或模拟器（都是 iOS6）上查看这个简单的小提琴时，数字键盘没有出现，而是我得到了标准的字母键盘。

http://jsfiddle.net/Cy4aC/3/

我到底能在这里搞砸什么？

Answer 1

您需要指定模式：

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

由于 anumber可以是负数或浮点数，因此-and.和,应该在键盘中可用，除非您指定仅数字模式。

Answer 2

从 ios 12.2（2019 年 3 月 25 日发布）开始，此解决方案将起作用，并且实现起来最简单

<input type="number" inputmode="decimal"/>

这将只显示数字键盘，而没有使用 input="tel" 附带的#+* 字符

Answer 3

我不确定这是否是您想要的，但输入 type = "tel" 会给您“电话号码键盘”。

Answer 4

以我的经验，这在浏览器之间非常不一致。iOS 在为我的用例正确支持这一点之间来回走动。我通常只希望默认显示的键盘是数字键盘。上次我检查时，使用 input type="number" 正确调出数字键盘，但忽略了“size”属性，这严重影响了我的移动格式。我为所有我希望默认使用数字键盘的输入添加了一个属性，并且当浏览器检测到一个可以正常工作的属性时，我使用 jQuery 来更改任何属性（即 type="number"）。这样我就不必返回并更新各个输入，并允许我只在支持的浏览器中应用它。

如果主要的移动操作系统除了输入类型之外还有一个“默认键盘”属性，那就太好了。如果用户输入地址或邮政编码怎么办？通常那些以数字开头，因此默认显示数字键盘但允许任何文本是有帮助的。

至于验证，我不能依赖浏览器来支持特定输入类型的验证，所以我使用 javascript 和服务器端验证。

Answer 5

问候。我知道这个问题很老，但我觉得这是一个非常受欢迎的解决方案，并决定发布一个答案。

这是我为解决iPad 键盘以及几乎所有问题而创建的解决方案。

此外，这种方法不需要您使用数字类型的输入，在我看来这是非常丑陋的。

下面，您可能会找到一个工作版本。

关于 Apple iPad 键盘按键的思考...

我必须创建一个 keyPress 事件处理程序来捕获和抑制 iPad 上似乎没有被 keyDown 事件处理或不明确的键？？？！

// Bind keydown event to all input type=text in form.
$("form input[type=text]").keydown(function (e) {

// Reference to keyCodes...
var key = e.which || e.keyCode;
// Reference to shiftKey...
var shift_key = e.shiftKey;
// Reference to ctrlKey...
var ctrl_key = e.ctrlKey;
// Reference to altKey...
var alt_key = e.altKey;


// When user presses the shiftKey...
if(e.shiftKey) {

//...supress its click and whatever key follows after it.
console.log(e.shiftKey + ' and ' + key + ' supressed.');

// Deny
return false;

// ONLY Allow Numbers, Numberpad, Backspace & Tab
} else if ( (key >= 48 && key <=57) || (key >= 96 && key <=105) || (key >= 8 && key <=9) ) {

// Allow
return true;

} else {

// Deny every other key and/or shift + key combination NOT explicitly declared.
return false;
}

});


// KeyPresss to handle remaining iPAD keyboard keys!
// These keys don't seem to be handled by the keyDown event or are ambiguous???!
// Bind keypress event to all input type=text in form.
$("form input[type=text]").keypress(function (e) {

// Reference to keyCodes...
var key = e.which || e.keyCode;
// Reference to shiftKey...
var shift_key = e.shiftKey;
// Reference to ctrlKey...
var ctrl_key = e.ctrlKey;
// Reference to altKey...
var alt_key = e.altKey;

switch (key) {

// Character -> ^
case 94:
return false;

// Character -> #
case 35:
return false;

// Character -> $
case 36:
return false;

// Character -> @
case 64:
return false;

// Character -> &
case 38:
return false;

// Character -> *
case 42:
return false;

// Character -> (
case 40:
return false;

// Character -> )
case 41:
return false;

// Character -> %
case 37:
return false;

// Character -> !
case 33:
return false;

}


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">

<label for="text1">Numbers, Numberpad, Backspace & Tab ONLY:</label>
<input id="text1" type="text" placeholder="0" min="0" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4">

</form>

Answer 6

在阅读并尝试了很多想法之后，我发现没有一个可以准确地显示只有数字和逗号或点的键盘。

我在这个输入上完成了使用 just<input type="number">和一个onkeyup处理程序，我做了这样的事情：

var previousValue = localStorage.getItem('myInputId');
if (input.getAttribute('type') === "number" && input.validity && input.validity.badInput) {
    input.value = previousValue || "";
}
localStorage.setItem('myInputId', input.value);

如果存在有效性错误，这可以防止用户通过将值替换为前一个值来写入错误的字符（我不知道这是一个 iOS 对象还是标准）

当心我没有测试这个代码片段，因为我身边有更复杂的东西，但我希望你能明白

使用此解决方案：

• 在 iOS 上：用户有一个完整的经典键盘，但默认打开数字，不能写错字符。
• 在 Android 上，数字键盘是完美的。
• 将来我们可以希望 iOS 能够触发良好的数字键盘，并且永远不会调用 javascript 部分。