2010-07-30 87 views
19

我尝试了<input type="number" />,但在Opera上输出一个奇怪的输入框,加上一个“上下”处理程序。我期望的是一个常规的文本字段,一旦你注意到它,就会提示数字键盘而不是字母。这甚至有可能吗?什么输入字段类型强制数字键盘移动键盘聚焦时出现?

p.s.我没有试图验证。这将是一个不错的用户体验,就是这样。

回答

13

type =“number”是HTML5和许多手机不支持HTML5。 对于通话链接,您可以使用type =“tel”或 <A href="wtai://wp/mc;600112233">Special A</A>。 你也应该看看CSS WAP extensions (page 56)

编辑10/2015:
大多数,如果不是所有智能手机都支持HTML5和CSS3,那么type="number"是最好的方法。

+0

我读了那个文档,没有任何东西让数字键盘提示instad字母表,所以它看起来不像将来对web开发人员有任何希望:( 我会把它作为最终答案 – Ayyash 2010-07-31 03:05:59

+0

@Ayyash,sry我想想我与输入和一个混淆。无论如何input type =“number”是HTML5。你可以使用iPhone和Android手机,我希望在未来的诺基亚浏览器。 – fravelgue 2010-08-02 09:13:34

19

官方HTML5的方式来处理电话号码是:

<input type="tel"> 

你可能不喜欢的“怪输入框中输入”你当你使用<input type="number" />使用Opera了,但是这确实是合适类型的输入当你想要求访问者输入一个数字值的区域。

+0

但“type = number”没有提示数字键盘,我会尝试使用Opera Mobile 10上的opera 10来调用电话类型 – Ayyash 2010-07-31 02:12:07

+0

,我认为它有一些HTML5,我知道我看过 work, input type didnt work though – Ayyash 2010-07-31 02:54:38

+0

The 'type="number"' attribute isn't necessarily supposed to bring up a number pad. The question is: are you trying to force users to enter in a numeric value, or enter in a phone number? For the former, 'type="number"' is what you want. For the latter, 'type="tel"' (the telephone keypad, including # and *) is what you're looking for. '' isn't an input field; it's a link to dial a phone number. Example: '1-408-555-5555'。 – Dori 2010-07-31 05:01:56

10

该帖子现在是无效的。所有智能手机现在都支持HTML5和CSS3,因此添加type =“number”实际上会提示数字键盘弹出。我刚刚在2个不同的Android版本和iPhone上进行了检查。就是这样,将来没有人会尝试WAP而不是正确的HTML5格式。

+6

根据我的测试,'type ='number''用iOS上可见的数字拉起全键盘,而'type ='tel''拉起数字键盘,这似乎是海报所问的。在Android上,'number'和'tel'都会拉起数字键盘。 – Stan 2016-01-29 18:54:34

20

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

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

  • 例手机输入:<input type="tel" pattern="[0-9]*" />

注:不支持type="tel"浏览器将默认为文本键入

当心:使用type="number"导致某些浏览器和信用卡,邮政编码的用户体验,并且电话输入其中一个用户可能需要输入标点符号或逗号输出是问题。

参考文献:

+2

这是最好的和最当前的答案。感谢您的笔记和链接,两者都非常有益。 – 2015-10-12 23:48:56

0

尝试<input type="number" pattern="/d*"> OR <input type="tel" pattern="/d*"> 这将帮助,如果你与Android合作。