Html <input type="number"/> 未在 iOS 上显示数字键盘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14447668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<input type="number"/> is not showing a number keypad on iOS
提问by Alex Wayne
According to Apple's documentationwhen I setup an input element with a type of numberI should get a number keypad.
根据Apple 的文档，当我设置一个类型为numberI的输入元素时，我应该得到一个数字键盘。
<input type="number"/>
number: A text field for specifying a number. Brings up a number pad keyboard in iOS 3.1 and later.
number：用于指定数字的文本字段。在 iOS 3.1 及更高版本中调出数字键盘。
Looks damn near impossible to mess up. However, when I view this simple fiddle on my iPhone or the simulator (both iOS6) the number keypad does not appear, and I get the standard alphabetic keyboard instead.
看起来该死的几乎不可能搞砸。但是，当我在我的 iPhone 或模拟器（都是 iOS6）上查看这个简单的小提琴时，数字键盘没有出现，而是使用标准的字母键盘。
What on earth could I possibly have messed up here?
我到底可能在这里搞砸了什么？
回答by Majid Laissi
You need to specify the pattern:
您需要指定模式：
<input type="number" pattern="\d*"/>
As a numbercan be negative or with floating point, so the -and .and ,should be available in the keyboard, unless you specify a digits only pattern.
由于 anumber可以是负数或带浮点数，因此-and.和,应该在键盘中可用，除非您指定仅数字模式。
回答by pIkEL
I am not sure if this is what you want but input type = "tel" will give you the "telephone number pad".
我不确定这是否是您想要的，但输入 type = "tel" 会给您“电话号码键盘”。
回答by Derek Henry
In my experience, this is very inconsistent across browsers. iOS has gone back and forth between supporting this correctly for my use case. I generally just want the default displayed keyboard to be the numeric one. The last time I checked, using input type="number" correctly brings up the numeric keyboard, but the "size" attribute is ignored, which throws off my mobile format badly. I added an attribute to all inputs that I'd prefer the numeric keyboard to use by default, and I used jQuery to change any attributes (i.e. type="number") when the browser detects as one that works correctly. That way I don't have to go back through and update the individual inputs and allows me to only apply it in supported browsers.
根据我的经验，这在浏览器之间非常不一致。对于我的用例，iOS 在正确支持它之间来回切换。我通常只希望默认显示的键盘是数字键盘。我上次检查时，使用 input type="number" 正确调出数字键盘，但忽略了“size”属性，这严重影响了我的移动格式。我为所有我希望默认使用数字键盘的输入添加了一个属性，并且当浏览器检测到可以正常工作时，我使用 jQuery 更改任何属性（即 type="number"）。这样我就不必返回并更新各个输入，并允许我只在支持的浏览器中应用它。
It would be lovely if the major mobile O/S's would have an attribute for "default keyboard" aside from the input type. What if a user is entering an address or zip code? Generally those start with numbers, so showing the number keyboard by default, but allowing ANY text, is helpful.
如果主要的移动操作系统除了输入类型之外还有“默认键盘”的属性，那就太好了。如果用户输入地址或邮政编码怎么办？通常那些以数字开头，因此默认情况下显示数字键盘，但允许任何文本，是有帮助的。
As far as validation, I can't rely on the browser to support validation for the specific input types, so I use javascript and server-side validation.
至于验证，我不能依赖浏览器来支持特定输入类型的验证，所以我使用 javascript 和服务器端验证。
回答by suchislife
Greetings. I know this question is old but I felt it's a very sought after solution and decided to post an answer.
你好。我知道这个问题很老，但我觉得这是一个非常受欢迎的解决方案，并决定发布答案。
Here's a solutionI've created to address the iPad keyboardas well as pretty much anything.
这是我为解决 iPad 键盘以及几乎所有问题而创建的解决方案。
Also, this approach does not require you to use input of type numberwhich in my humble opinion is very ugly.
此外，这种方法不需要您使用数字类型的输入，在我看来这是非常难看的。
Below, you may find a working version.
在下面，您可能会找到一个工作版本。
Thoughts on Apple iPad keyboard keys...
对 Apple iPad 键盘按键的思考...
I had to create a keyPress event handler to capture and suppress keys on the iPad that don't seem to be handled by the keyDown event or are ambiguous???!
我必须创建一个 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>回答by Guillaume Gendre
After reading and trying a lot of ideas, none of what I found worked to show exactly the keyboard with digits only and the coma or dot.
在阅读并尝试了很多想法之后，我发现没有一个能够准确显示仅包含数字和昏迷或点的键盘。
I finished using just <input type="number">and a onkeyuphandler on this input where I do something like this :
我完成<input type="number">了onkeyup在这个输入上使用 just和一个处理程序，我在那里做这样的事情：
var previousValue = localStorage.getItem('myInputId');
if (input.getAttribute('type') === "number" && input.validity && input.validity.badInput) {
input.value = previousValue || "";
}
localStorage.setItem('myInputId', input.value);
This prevents the user to write wrong characters by replacing the value with the previous one if there is a validity error (I dont't know if this is an iOS object or standard)
如果存在有效性错误，这可以防止用户通过将值替换为前一个值来编写错误的字符（我不知道这是 iOS 对象还是标准）
beware I did't test this code snippet because I have more complex stuff around on my side but I hope you will get the idea
当心我没有测试这个代码片段，因为我身边有更复杂的东西，但我希望你能明白
With this solution :
有了这个解决方案：
- On iOS : the user has a full classic keyboard but opened by default on the numbers and can't write wrong characters.
- On Android, the number keyboard is perfect.
- In the future we can hope that iOS will trigger the good keyboard for numbers and that the javascript part will never be called.
- 在 iOS 上：用户有一个完整的经典键盘，但默认情况下在数字上打开并且不能写错字符。
- 在 Android 上，数字键盘是完美的。
- 将来我们可以希望 iOS 会触发良好的数字键盘，并且永远不会调用 javascript 部分。
