<input type =“number”/>未在iOS上显示数字键盘

Question

根据Apple's documentation，当我设置类型为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

我不确定这是否是你想要的，但输入类型=“tel”会给你“电话号码簿”。

Answer 4

根据我的经验，这在浏览器中非常不一致。对于我的用例，iOS在支持这种情况之间来回徘徊。我通常只希望默认显示的键盘是数字键盘。我最后一次检查时，使用输入类型=“数字”正确地调出数字键盘，但忽略了“size”属性，这严重抛弃了我的移动格式。我在所有输入中添加了一个属性，我更喜欢默认使用数字键盘，当浏览器检测到一个正常工作时，我使用jQuery来更改任何属性（即type =“number”）。这样我就不必返回并更新单个输入，并允许我仅在支持的浏览器中应用它。

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

就验证而言，我不能依赖浏览器来支持特定输入类型的验证，因此我使用javascript和服务器端验证。

Answer 5

在阅读并尝试了很多想法之后，我发现的所有内容都没有用来显示只有数字和昏迷或点的键盘。

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

Answer 6

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

这是一个解决方案我已经创建了解决iPad键盘以及几乎所有内容。

此外，这种方法并不要求您使用类型编号的输入，这在我看来非常难看。

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

关于Apple iPad键盘按键的想法......

我必须创建一个keyPress事件处理程序来捕获和抑制iPad上的键，这些键似乎不会被keyDown事件处理或者是不明确的???！

＆＃13;

＆＃13;

// 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;

}


});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;