ios - iPhone/iOS : Presenting HTML 5 Keyboard for Postal Codes

Question

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

例如，有些记录在 Apple 的网站上，Configuring the Keyboard for Web Views .

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

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

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

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

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

更新:

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

Answer 1

这行得通吗？

HTML:

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

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

Android/iOS 手机:

桌面:

iPad: