在iPhone 和 Android设备上，HTML5的关于键盘的输入类型

转自：http://www.html5china.com/thread-220-1-1.html

 

在iPhone 和 Android设备上，HTML5的关于键盘的输入类型

二○一○年十一月十五日



如果你想使用PhoneGap, 或者jQuery Mobile来建立你的移动web应用，我想你需要了解下HTML5提供的新的输入标签（input tag）的类型特征和它对应的值.

虽然这些标签对桌面浏览器的用处不大，但对移动浏览器却益处多多。不同的输入标签类型可以调用移动设备上不同的默认键盘布局，如在iPhone和基于Android的各种设备上。



input type = email 当你在输入标签中定义 type="email" ,iPhone就会显示一个带有一个小空格键键盘，其中包括一个@ 键。



代码如下:



下面是iPhone OS 4的屏幕显示:





注意Android 2.2 在这种情况下仍显示默认键盘。



input type = number当你想提供数字输入，你可以用HTML5 提供的 type="number" 输入特性值。



下面是iPhone 4上的数字键盘显示:





Android 2.2 用了 type=number 后的数字键盘显示:





input type = tel 对于电话号码，你可以使用 input type="tel"

下面是iPhone的键盘显示:





Android 对于"type = tel" 和 "type = number"显示了同样的键盘。 



input type = url 最后当你想让用户输入一个url， 你可以象下面那样描述输入 type="url":

在iPhone中删除空格键，并增加了.com 和斜杠键：



Android2.2对于"type=url"则显示了默认的文本输入键盘



现在就开始使用这些类型吧你可以现在就开始使用这些类型，它可以给你的手机浏览用户带来更好的用户体验。对于不支持HTML5的浏览器，它们都会将不认识的输入类型默认为 type="text".实际上，当你从JavaScript上获取这样的类型元素，它都会返回一个"text"值。



在你的移动设备上尝试这些例子吧这里有个连接可以亲身体验HTML5的标单输入类型。你可以将你的移动设备上的键盘显示张贴出来。这个例子页面的布局使用的是jQuery mobile.