什么输入字段类型可以在聚焦时强制启用数字键盘移动键盘？

Question

我尝试了<input type="number" />，但在Opera上它会输出一个奇怪的输入框，并配有一个“向上”和“向下”的处理程序。我期望的是一个普通的文本字段，一旦你聚焦在它上面，就会提示数字键盘而不是字母。这是否可能？

附言：我不是在尝试验证。这只是一个好的用户体验。

- Ayyash

Answer 1

使用 pattern="[0-9]*"

• 示例数字输入：<input type="number" pattern="[0-9]*" />

• 示例电话号码输入：<input type="tel" pattern="[0-9]*" />

注意：不支持type="tel"的浏览器将默认为文本类型。

警告：使用type="number"可能会对信用卡、邮政编码和电话输入等需要用户输入标点符号或逗号的输出的浏览器和用户体验造成问题。

参考资料:

• http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
• http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/

- Huski

---

这是最好的、最新的答案。感谢您的备注和链接，两者都非常有教育意义。 - Matt Cromwell

Answer 2

处理电话号码的官方HTML5方法是：

<input type="tel">

如果你使用 <input type="number" />，在Opera浏览器中出现“奇怪的输入框”，可能会让你不太满意，但这确实是当你想要要求访问者输入数字值时适用的输入区域类型。

- Dori

---

但是"type=number"没有提示数字键盘，我会尝试使用tel类型。 - Ayyash

我在Windows Mobile 6.5上使用Opera 10，我认为它有一些HTML5功能，我知道我已经看到过<a href="tel:">起作用，但输入类型却不起作用。 - Ayyash

type="number" 属性并不一定会弹出数字键盘。问题是：您是想强制用户输入数字值还是电话号码？对于前者，type="number" 是您想要的。对于后者，type="tel"（包括#和*的电话键盘）是您要寻找的。<a href="tel:"> 不是一个输入字段；它是一个拨打电话号码的链接。例如：<a href="tel:[phone]">1-408-555-5555</a>。 - Dori

@Ayyash，我并不生气——我只是认为你没有注意到。你问了Mobile Opera中的输入问题。我告诉了你在许多2010年代移动手机上安装的浏览器中输入是如何工作的。@fravelgue告诉你许多手机不支持HTML（无关紧要，因为Opera支持），一种链接类型的工作方式（无关紧要，因为它们不是输入），以及一个2001年的WAP CSS规范，它不适用于Opera或WAP v1或HTML输入字段。顺便说一句：不，你从来没有说过input type=tel对你不起作用——你说“我会尝试电话类型”，但从未报告你的结果。 - Dori

Answer 3

type="number" 是 HTML5，很多手机不支持 HTML5。 对于电话链接，你可以使用 type="tel" 或 <A href="wtai://wp/mc;600112233">特殊 A</A>。 你还应该看一下 CSS WAP 扩展（第 56 页）。

编辑于 2015 年 10 月：
大多数如果不是所有的智能手机都支持 HTML5 和 CSS3，所以 type="number" 是最好的选择。

- fravelgue

---

我阅读了那份文件，里面没有任何内容可以让数字键盘弹出而非字母键盘，所以看起来未来对于Web开发人员来说并没有什么希望。 :( 我会把这个当作最终答案。 - Ayyash

3 条评论：① <a> 标签是用于链接的，而不是输入。你问的是输入字段，为什么最好的答案却没有回答你的问题？ ② 鉴于 WAP2 是 XHTML MP（HTML 的轻量级版本），他的说法“许多手机不支持 HTML”意味着你无论如何都不能在这些手机上使用 WAP2。 ③ WAP 已经死了——请参见WAP 网站与传统 HTML 移动网站有何不同和HTML 和 WML/WAP 之间有何不同？。 - Dori

@Ayyash，抱歉我觉得我混淆了输入和a。无论如何，input type="number"是HTML5的功能。你可以在iPhone和Android手机上使用它，并希望在未来的诺基亚浏览器中也能使用。 - fravelgue

@Dori WAP已经过时了（就像HTML5杀死xhtml一样，你知道吗？！）。但是还有许多浏览器仍然支持它，并且在HTML MP中可以使用WAP的某些功能。请记住不是每个国家都是美国或欧洲。 - fravelgue

在Opera Mobile中，input type=tel完全被忽略，而是显示常规键盘。 - andreszs

<input type="number"> 会在输入框中显示一个HTML“微调器”见此处。当输入内容为非递增数字值（例如邮政编码）时，微调器会引起用户体验问题。您可以使用此链接关闭微调器并/或者使用pattern 属性，如我在 另一个回答 中所述。 - Huski

Answer 4

此帖子已失效。现在所有智能手机都支持HTML5和CSS3，因此添加type="number"确实会提示数字键盘弹出。我刚在两个不同的Android版本和一个iPhone上检查了一下。以后没有人会尝试使用WAP而不是正确的HTML5格式。

- Jeff Walters

---

根据我的测试，type='number' 会在 iOS 上呈现带有数字的完整键盘，而 type='tel' 则会呈现数字键盘，这似乎是发布者所询问的。在 Android 上，number 和 tel 都会呈现数字键盘。 - Stan

Answer 5

您可以使用HTML属性inputmode，独立于输入类型，控制输入焦点时出现的键盘样式。您可能正在寻找的是inputmode="numeric"，它会显示一个带有0-9数字键的数字键盘。还有其他选项，例如带有#和*的数字键盘。请参阅下面链接的文档。

这对于type="number"无法处理的用例非常理想，例如带有破折号格式的数字。

链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

- Marc M.

Answer 6

这将适用于移动设备，并且将防止字母“e”（以及所有其他字母）在桌面版页面中被输入。仅使用type="number"通常仍允许按规范输入“e”： "最初的回答"

<input pattern="[0-9]*" type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');">

如果你在上面使用type="number"，那么如果你输入"123"然后输入"e"，oninput JS将替换框中的所有内容。如果你只想要整数值，请使用type="text"。"最初的回答"

- d35348w

Answer 7

尝试使用以下代码，如果你正在处理Android相关的工作，这将会有所帮助：

<input type="number" pattern="/d*"> 或者 <input type="tel" pattern="/d*">

- souvik