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

Question

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

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

我想使用 input type="text" 而不是 input type="number" 的原因是如果我输入数字字段的非数字。例如，如果我输入ABC，它会自动变空。在我看来，使用 input type="text" 将更容易进行这种控制。

Answer 1

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

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

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

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