移动端兼容系列 表单兼容（下篇）

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即可)。

测试效果图：

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

移动端系统：iOS系统

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

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

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

欢迎沟通交流~HTML5学堂