<input type=“number”/>未在 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*"/>

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

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

在阅读并尝试了很多想法之后，我发现没有一个能够准确显示仅包含数字和昏迷或点的键盘。

我在这个输入上只使用了<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 部分。