HTML5学堂-码匠 HTML5学堂

您当前位于:项目兼容问题 ——> 移动端项目开发经验 - 移动端表单兼容问题(下)

移动端项目开发经验 - 移动端表单兼容问题(下)

2015/07/09 08:30:18 | 作者:HTML5学堂(码匠) | 分类:项目兼容问题 | 关键词:移动端,兼容问题,开发经验,表单兼容

移动端兼容系列 表单兼容(下篇)

HTML5学堂:本文,我们将继续为大家总结介绍移动端的常见兼容问题,今天要提的是关于表单的一些兼容问题,主要包括调用相册的按钮样式处理;占位符placeholder属性的行高问题;关闭iOS中键盘自动大写。

对于移动端的兼容问题,由于内容较多,决定书写成一个系列。在这些杂乱知识的发现与整理,主要来源于几个讲师平时的积累,而自己的学生们也为内容的充实做出了很大的贡献,在此非常感谢~!不再多说,一起进入今天的主要内容。

移动端兼容 - 调用相册的按钮样式处理

具体情形:<input type="file" accept="image/*;capture=camera">或者<input type="file" capture="photo">设背景图无效。在我们的移动端网页当中,会有上传照片的操作需求。此时会使用到文件类型的input文本框,但是不同的系统不同的浏览器在样式上均不相同,而且,设置背景图也没有效果。

解决方法:通过设置opacity为0来进行模拟,背景图设置在其他标签里面。换句话说样式用普通标签模拟,功能用input来实现。

测试效果图:

移动端兼容 - 调用相册

欢迎沟通交流~HTML5学堂

移动端兼容 - 占位符 placeholder新属性

具体情形:placeholder并不支持padding和height值,在Android手机原生浏览器里面如果设置了line-height的值,比如设为line-height:32px。在Android自带浏览器、百度手机浏览器、小米自带浏览器上出现左图的问题(占位符靠顶部)。UC/QQ浏览器正常如右图显示。

解决方法:line-height设置为line-height: normal(或者不设置行高问题,只设置padding即可)。

测试效果图:

移动端兼容 - placeholder 非正常状态
移动端兼容 - placeholder 正常行高

移动端兼容 - 关闭iOS中键盘自动大写

移动端系统:iOS系统

具体情形:在iOS中,当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能。

解决方法:移动版本webkit为 input元素提供了autocapitalize属性,通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

关于表单的兼容问题,这里就算告一段落了,下一篇文章继续为大家介绍移动端其他方面的兼容问题~~~感谢各位的支持~!

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端