iPhone / iOS :为邮政编码呈现HTML5键盘
在移动设备上显示HTML5输入的不同键盘(即<input>标签)有几个技巧。
例如，在苹果公司的网站Configuring the Keyboard for Web Views上有一些文档。
这些对于可用性来说是很棒的，但是当涉及到国际邮政编码的输入时(大多数是数字，但允许使用字母)，我们留下了一些糟糕的选择。大多数人推荐使用pattern="\d*"技巧来显示数字键盘，但这不允许字母输入。
type="number"输入类型显示常规键盘，但转换为数字布局：
这在iOS设备上工作得很好，但它会让Chrome认为输入一定是一个数字，甚至改变了输入的行为(向上/向下递增和递减数值)。
有没有办法让iOS默认使用数字布局，但仍然允许字母数字输入？
基本上，我希望type="number"的iOS行为，但我希望该字段的行为类似于桌面浏览器上的常规文本字段。这个是可能的吗？
更新：
嗅探iOS的用户代理并使用type="number"输入类型是不可取的。type="number"不适用于字符串值(如邮政编码)，它还有其他副作用(如去掉前导零、逗号分隔符等)，这使得它不适用于邮政编码。
回答 7
Stack Overflow用户
发布于 2015-07-25 05:01:17
这样行得通吗？
HTML：
<input type="tel" pattern="[0-9]*" novalidate>这应该会在Android/iOS手机浏览器上为你提供漂亮的数字键盘，在桌面浏览器上禁用浏览器表单验证，不显示任何箭头旋转器，允许前导零，并允许在桌面浏览器和iPad上使用逗号和字母。
安卓/ iOS手机：
桌面：
iPad：
Stack Overflow用户
发布于 2015-02-21 10:31:34
浏览器目前还没有合适的方式来表示像邮政编码和信用卡号码这样的数字代码。最好的解决方案是使用type='tel'，它会给你一个数字键盘和在桌面上添加任何字符的能力。
键入text，pattern='\d*'将为您提供一个数字键盘，但仅在iOS上。
有一个名为inputmode的属性的HTML5.1建议，它允许您指定键盘而不管类型。但是，目前任何浏览器都不支持。
我还建议您查看一下Webshim polyfill库，它有一个用于这些类型输入的polyfill method。
Stack Overflow用户
发布于 2014-09-02 05:11:42
用谷歌快速搜索一下，就找到了this Stackoverflow question。
HTML
<input type="text">Javascript
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});在验证表单之前切换输入类型，显示正确的键盘而不会打乱值。如果您只希望它在iOS上运行，则可能必须使用用户代理。
https://stackoverflow.com/questions/25425181
复制相似问题