iOS Web开发之输入类型及键盘风格

转载前的话：移动端键盘风格的设置，对于用户体验是非常重要的~免去了用户切换键盘的麻烦。

=========================================================================

Web开发在移动端开发越来越流行，很多App已经用html5+css来实现UI。但是在用户进行输入时，如何在iPhone上显示正确的键盘，对于只熟悉html5的人来说，有点困难。

现在我就把html中得input type和实际键盘显示效果一一对应展示，给广大web开发者起一个参考作用

测试手机:

iPhone4+iOS6.1.3

iPhone4s+iOS7.0.4

由于截屏时，可能输入焦点的闪烁的竖条刚好消失，所以我把所有的焦点输入框都用红线条框起来

input type	iOS6	iOS7	区别
Text: <input type="text" name="user_text" />			无区别
Phone: <input type="tel" name="user_tel" />			无区别
Number: <input type="number" name="user_number">			无区别
URL: <input type="url" name="user_url">			无区别
Email: <input type="email" name="user_email">			无区别
Search: <input type="search" name="user_search" placeholder="free key">			无区别
Password: <input type="password" name="user_password">			无区别
Date: <input type="date" name="user_date">			无区别
Datetime: <input type="datetime" name="user_date">			iOS7貌似不支持Datetime这种输入类型了 可以用datetime-local替代
Datetime local: <inputtype="datetime-local" name="user_date_local">			无区别
Month: <input type="month" name="user_month">			无区别
Time: <input type="time" name="user_time">			稍微有点区别哟，是因为iOS6的设备采用24小时制， 而iOS7的设备没有采用
Week: <input type="week" name="user_week" width="99"height="50">		week框显示很小，而且设置不了焦点， 出不了键盘	iOS7貌似不支持了。

转自：http://www.cnblogs.com/perryxiong/p/3480019.html