HTML输入框：自动显示数字输入法

Question

我有一个针对移动设备优化的web应用，但是我的大多数表单输入字段都是数字。每次我使用Android手机访问表单并点击其中一个输入字段进行输入时，QWERTY键盘弹出来了，我必须切换到数字输入法并输入一些数字，这很不方便。

是否有HTML属性或类似的东西可以使Android（和iPhone）默认显示数字键盘？

再次说明，这是一个Rails应用程序，而不是原生智能手机应用程序。

非常感谢您的帮助。

- scrrr

---

相关：如何在 Android 手机网站上强制使用带有数字的键盘 - Rory O'Kane

Answer 1

在HTML 5中，type='number'表示该字段仅接受数字输入，并且现代浏览器将只允许数字输入。

<input type='number' value='123' />

---

编辑：

让我稍微修改一下，因为根据评论来看，原来的答案对大多数人都有点浅显。

基本上，你有三个选择：type='number'、type='range'和type='tel'。 没有一个是保证可以正常工作的。结果取决于浏览器和键盘。

例如，我的Android Opera Mobile不会要求使用数字键盘，但它确实像桌面版本一样向number字段添加了旋转框。这个旋转框可以使用step='0.1'，但目前的实现不太适合移动设备使用。

在我的Android Firefox 5上，number也不会生成数字键盘 - 这时我开始怀疑我的系统键盘是否支持数字 - 但是tel会！而且还有点号！以及ABC DEF GHI对应的1 2 3。

然而，type='tel'并不是HTML5标准（尚未），浏览器也不会进行验证。（更新于2013-08：tel已成为HTML5标准！我不确定是什么时候...）

至于range，规范要求浏览器提供滑块而不是输入框。有些可以，有些不行，iPhone Safari据我所知是后者。如果你不介意呈现方式的差异，它可能是一个更好的选择。

是啊，我知道。欢迎来到HTML 5开发。事情正在变得更好；我希望您不会被我们现在经历的风暴吓倒。

- Sheepy

---

iOS和Opera肯定会以不同的方式处理“number” - 请参见http://diveintohtml5.org/forms.html#type-number。我对Android没有任何想法。 - Paul D. Waite

@PaulDWaite 数字类型的“input”元素在我的两个Android设备上（Android 2.2 / WebKit 3.1和Android 2.3 / WebKit 4.0）都显示数字键盘。 - robertc

重要的是要注意，“number”类型字段的显示方式或影响输入设备的方式是特定于浏览器的，并且可能会发生变化（HTML5仍然是一个草案规范）。您应该绝对使用“number”类型来表示数字字段，但它是浏览器的责任以最明智和可用的方式呈现它 - 您应该相信它们能够做到这一点。 - Robin Winslow

type="tel"现在已经成为HTML标准的一部分（请参见input type的完整列表）。此外，这里有一些方便的屏幕截图，比较了“电话”和“数字”键盘。 - Rory O'Kane

显示数字键盘的另一种方法是<input type="text" pattern="\d*" />。但是，这仅在iOS的Safari上受支持；它在Android上不起作用。 - Rory O'Kane

Answer 2

我发现结合两种方法会让这个实现变得更加容易。

在大多数Android浏览器中，设置type="number"通常能够解决问题。但是，在iOS中，这将弹出普通的键盘，但默认为数字和特殊字符页面。我更喜欢电话拨号器类型输入。要在iOS中实现此功能，请使用pattern属性。最终的HTML元素将如下所示：

<input type="number" pattern="[0-9]*" value="123" />

- jkjustjoshing

---

该方法适用于 type="number" 和 type="text"。如果您希望输入值为字符串，请使用 type="text"。如果您希望输入值为数字，请使用 type="number"。 - Josh Buchea

iOS 10.2 这个版本可以工作，而没有模式的注释则无法工作。感谢提供信息。 - Johnish

Answer 3

type='tel' / HTML 增强？

如果 type='tel' 不是 html5 的一部分，那么谁来组织该属性的确切行为呢？

希望 tel 属性应该接受两种样式：

1. 国家格式电话号码：

以下是芬兰的一个例子：

0401234567

1. 国际格式电话号码：

以下是同样来自芬兰的例子，但采用适当的国际格式：

[phone]

因此，在 "tel" 中，规则应如下：

第一个字符可以是数字或特殊字符 "+"。

任何其他字符必须是数字。

这种格式适用于任何国家。

以下是来自澳大利亚的另一个例子：

[phone]（国际格式）

0418765432（相同的电话号码，但采用国家格式）

北美人似乎使用自己的格式，例如 (212) 1234567。

但是，这种格式的问题在于它与其他每个国家都不兼容。

需要注意的是，有效电话号码的长度可能会因国家而异，甚至在同一国家内也可能不同。因此，“tel”不应强制任何长度限制，至少不应太严格。

我不知道国际格式中最大合法电话号码长度是多少。

然而，在芬兰，国内部分规定为12个有效数字。

因此，以下是在芬兰可以使用的最长有效号码示例：

0501234567890

或者

[phone] 的国际格式。

在GSM手机中，如果您将电话号码作为AT命令的一部分使用，则可以（在某些命令中）指定号码的类型（格式）。但是，如果您没有这样做，

默认情况下假定该号码采用正确的国际格式，如果该号码以“+”字符开头，

否则假定该号码采用国内格式，

这意味着以数字开头的号码将发送到移动电话当前所在的国家，除非该号码以在移动电话当前所在国家生效的已知国际前缀开头。

那么，“tel”在美国以外的国家使用是否安全，或者它会强制将号码格式化为北美格式，这对于除美国以外的每个国家都是错误的？

- AHiismak

---

input type="tel"的规范说明（http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#telephone-state-%28type=tel%29）指出，“电话类型不强制使用特定语法”，并鼓励您“使用[`pattern`](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-pattern)属性”如果您“需要强制执行特定格式”。 因此，input type="tel"可以帮助用户输入电话号码，但并不一定保证它将以任何特定格式出现。 - Rory O'Kane

下次，您应该将此作为一个新问题提交，因为你没有回答这个问题。如有必要，您可以在问题中放置链接到其他相关问题。 - Rory O'Kane

Answer 4

如果您只需要显示专用键盘，而不需要相应的语义、验证等功能，您可以使用 inputmode 属性，例如：

<input type="text" value="[phone]" inputmode="tel" />
<input type="text" value="123.45" inputmode="decimal" />

- Kuba Niewiarowski