当前位置: 代码迷 >> HTML/CSS >> 在iPhone 跟 Android设备上,HTML5的关于键盘的输入类型
  详细解决方案

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

热度:514   发布时间:2013-08-10 21:14:06.0
在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.