iPhone / iOS：展示用于邮政编码的 HTML 5 键盘
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25425181/
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
iPhone / iOS : Presenting HTML 5 Keyboard for Postal Codes
提问by Ryan McGeary
There are several tricks for displaying different keyboards on mobile devices for HTML 5 inputs (i.e. <input>tags).
有几个技巧可以在移动设备上为 HTML 5 输入（即<input>标签）显示不同的键盘。
For example, some are documented on Apple's website, Configuring the Keyboard for Web Views.
例如，一些记录在 Apple 的网站上，为 Web 视图配置键盘。
These are great for usability, but when it comes to an input for for international postal codes (mostly numeric, but letters allowed), we're left with some poor options. Most people recommend using the pattern="\d*"trick to show the numeric keyboard, but that doesn't allow for letter input.
这些对于可用性来说非常有用，但是当涉及到国际邮政编码（主要是数字，但允许使用字母）的输入时，我们有一些糟糕的选择。大多数人建议使用该pattern="\d*"技巧来显示数字键盘，但这不允许字母输入。
The type="number"input type shows the regular keyboard but shifted to the numeric layout:
该type="number"输入类型节目的常规键盘，但转移到了数字布局：
This works well for iOS devices, but it makes Chrome think the input must be a number and even changes the input's behavior (up/down increment and decrement the value).
这适用于 iOS 设备，但它让 Chrome 认为输入必须是一个数字，甚至改变输入的行为（向上/向下增加和减少值）。
Is there any way to get iOS to default to the numeric layout, but still allow for alphanumeric input?
有什么方法可以让 iOS 默认为数字布局，但仍然允许字母数字输入？
Basically, I want the iOS behavior for type="number"but I want the field to behave like a regular text field on desktop browsers. Is this possible?
基本上，我想要 iOS 的行为，type="number"但我希望该字段的行为类似于桌面浏览器上的常规文本字段。这可能吗？
UPDATE:
更新：
Sniffing the user-agent for iOS and using the type="number"input type is not an option. type="number"is not meant for string values (like postal codes), and it has other side effects (like stripping leading zeros, comma delimiters, etc) that make it less than ideal for postal codes.
嗅探 iOS 的用户代理并使用type="number"输入类型不是一种选择。type="number"不适用于字符串值（如邮政编码），并且它具有其他副作用（如去除前导零、逗号分隔符等），使其不太适合邮政编码。
回答by Aaron Gray
Will this work?
这会起作用吗？
HTML:
HTML：
<input type="tel" pattern="[0-9]*" novalidate>
This should give you the nice numeric keyboard on Android/iOS phone browsers, disable browser form validation on desktop browsers, not show any arrow spinners, allows leading zeros, and allows commas and letters on desktop browsers, as well as on iPad.
这应该会在 Android/iOS 手机浏览器上为您提供漂亮的数字键盘，在桌面浏览器上禁用浏览器表单验证，不显示任何箭头微调器，允许前导零，并允许在桌面浏览器和 iPad 上使用逗号和字母。
Android / iOS phones:
安卓/iOS手机：
Desktop:
桌面：
iPad:
iPad：
回答by davidelrizzo
Browsers currently have no proper way of representing numeric codes like postcodes and credit card numbers. The best solution is to use type='tel'which will give you a number keypad and ability to add any character on desktop.
浏览器目前没有正确的方式来表示数字代码，如邮政编码和信用卡号码。最好的解决方案是使用type='tel'它会给你一个数字键盘和在桌面上添加任何字符的能力。
Type textand pattern='/d'will give you a number keypad but only on iOS.
输入text并pattern='/d'会给你一个数字键盘，但仅限于 iOS。
There is an HTML5.1 proposal for an attribute called inputmodewhich would allow you to specify keypad regardless of type. However not is not currently supported by any browser.
有一个 HTML5.1 提议的属性称为inputmode允许您指定键盘而不考虑类型。但是，目前任何浏览器都不支持 not。
I would also recommend having a look at the Webshimpolyfill library which has a polyfill methodfor these types of inputs.
我还建议您查看Webshim polyfill库，该库为这些类型的输入提供了一种polyfill方法。
回答by seaside98
A quick google search found this Stackoverflow question.
一个快速的谷歌搜索找到了这个 Stackoverflow 问题。
HTML
HTML
<input type="text">
Javascript
Javascript
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
The input type is switched before the form can be validated, showing the correct keyboard without messing up the value. If you only want it to run on iOS, you will probably have to use the user agent.
在验证表单之前切换输入类型，显示正确的键盘而不会弄乱值。如果您只希望它在 iOS 上运行，则可能必须使用用户代理。
回答by davidcondrey
This will make the numerical side of the ios keyboard display by default and maintains the ability to switch to the alphabetical side. When the html input type changes, the device changes the keyboard to match the appropriate type.
这将使ios键盘的数字侧默认显示并保持切换到字母侧的能力。当 html 输入类型发生变化时，设备会更改键盘以匹配适当的类型。
(function ($) {
var control = $('#test2');
var field = $('#test1');
control.bind('click', function () {
if (control.is(':checked')) {
field.attr('type', 'text');
} else {
field.attr('type', 'number');
}
})
}(jQuery));
<input type="number" id="test1" value="123" />
<input id="test2" type="checkbox" />Change
alternate demo: http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/
替代演示：http: //jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/
If you want the large numerical format keyboard (the telephone style) you can adjust the code accordingly and it still works:
如果你想要大数字格式键盘（电话风格），你可以相应地调整代码，它仍然有效：
(function ($) {
var control = $('#test2');
var field = $('#test1');
control.bind('click', function () {
if (control.is(':checked')) {
field.attr('type', 'text');
} else {
field.attr('type', 'tel');
}
})
}(jQuery));
<input type="tel" id="test1" value="a" />
<input id="test2" type="checkbox" />Change
回答by Mark Tomlin
An update to this question in iOS 11. You can get the number keypad by simply adding the pattern attribute (pattern="[0-9]*") to any input with a number type.
iOS 11 中此问题的更新。您只需将模式属性 ( pattern="[0-9]*")添加到任何具有数字类型的输入即可获得数字键盘。
The following works as expected.
以下按预期工作。
<input type="number" pattern="[0-9]*">
This also works.
这也有效。
<input type="number" pattern="\d*">
@davidelrizzo posted part of the answer, but the comments from @Miguel Guardo and @turibe give a fuller picture but are easy to miss.
@davidelrizzo 发布了部分答案，但@Miguel Guardo 和@turibe 的评论提供了更全面的图片，但很容易错过。
回答by rintaro
Try this:
尝试这个：
<input type="text" name="postalcode" class="js-postal">
<script src="https://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
if('ontouchstart' in window) { // ensure we are in touch device.
$('input.js-postal').on('focus', function() {
var $this = $(this);
// memorize current value because...
var val = $this.val();
// this may cause reset value.
$this.attr('type', 'number');
setTimeout(function() {
// Asynchronously restore 'type' and value
$this.attr('type', 'text');
$this.val(val);
}, 0);
});
}
});
</script>
I know this is very hackish way, but this apparently works.
I haven't tested on Android devices though.
我知道这是非常黑客的方式，但这显然有效。
不过我还没有在 Android 设备上测试过。
Note this may causes a little noticeable glitches when $this.attr('type', 'number')because this reset the value when inputhas non numerical characters.
请注意，这可能会导致一些明显的故障，$this.attr('type', 'number')因为这会在input具有非数字字符时重置值。
Basic ideas are stolen from this answer:)
从这个答案中窃取了基本想法:)
回答by Jeremiah Jinno
Why not check the header of the HTTP request (user agent), and serve up the numeric layout to the iOS devices, while serving up the alphanumeric layout to the rest?
为什么不检查 HTTP 请求（用户代理）的标头，并为 iOS 设备提供数字布局，同时为其余设备提供字母数字布局？
