iPhone / iOS：呈现用于邮政编码的 HTML 5 键盘

Question

有几个技巧可以在移动设备上为 HTML 5 输入显示不同的键盘（即 <input> 标签）。

例如，有些记录在 Apple 的网站上， 为 Web 视图配置键盘。

这些对于可用性非常有用，但是当涉及到国际邮政编码的输入时（主要是数字，但允许字母），我们剩下一些糟糕的选择。大多数人建议使用 pattern="\d*" 技巧来显示数字键盘，但这不允许输入字母。

type="number" 输入类型显示常规键盘，但转换为数字布局：

这适用于 iOS 设备，但它使 Chrome 认为输入必须是数字，甚至会更改输入的行为（向上/向下递增和递减值）。

有没有办法让 iOS 默认为数字布局，但仍然允许字母数字输入？

基本上，我想要 type="number" 的 iOS 行为，但我希望该字段在桌面浏览器上的行为类似于常规文本字段。这可能吗？

更新：

嗅探 iOS 的用户代理并使用 type="number" 输入类型不是一个选项。 type="number" 不适用于字符串值（如邮政编码），它还有其他副作用（如去除前导零、逗号分隔符等），这使得它不太适合邮政编码。

原文由 Ryan McGeary 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这行得通吗？

HTML:

 <input type="tel" pattern="[0-9]*" novalidate>

这应该在 Android/iOS 手机浏览器上为您提供漂亮的数字键盘，在桌面浏览器上禁用浏览器表单验证，不显示任何箭头微调器，允许前导零，并在桌面浏览器和 iPad 上允许逗号和字母。

Android / iOS 手机：

桌面：

iPad：

原文由 Aaron Gray 发布，翻译遵循 CC BY-SA 3.0 许可协议