转载前的话:移动端键盘风格的设置,对于用户体验是非常重要的~免去了用户切换键盘的麻烦。
=========================================================================
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貌似不支持了。 |