使用输入文本在 iPhone 中显示数字键盘

Question

请注意，使用 input type="number" 可以显示数字键盘，如下所示：

是否可以使用 input type="text" 来显示相同的数字键盘？我 不想 使用 pattern="\d*" 显示数字键盘，因为该值可能包含小数位。

我想使用 input type="text" 而不是 input type="number" 的原因是，如果我在数字字段中输入非数字，我将无法取回该值。例如，如果我输入 ABC ，它会自动变空。在我看来，使用 input type="text" 对于这种控制来说会更容易。

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

Answer 1

如果您的输入是真实数字、整数或小数，则使用 HTML5 type="number" 输入。这将在 Android 设备上调出正确的键盘（假设 Windows 手机也是如此）。

然后诀窍是在该属性上放置一个 pattern="[0-9]*" 以在 iOS 上强制使用特殊数字键盘。注意：

1. 这不会将小数点或减号标记为无效，因为 模式属性实际上在 type=“number” 字段上无效！ 和
2. 这是获取 iOS 数字键盘的 唯一 方法。查看字母键盘的数字部分（如上面的屏幕截图所示）与真正的数字键盘之间的区别。

最后一点，请务必不要将类型编号字段用于非真实数字的输入（例如，带前导零的邮政编码或带逗号或空格的产品代码）。数字输入字段不能提交不是真实数字的值！ （取决于浏览器/设备）

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