【系列】移动端项目经验 表单兼容(下篇)

【系列】移动端项目经验 表单兼容(下篇)

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

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

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

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

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

测试效果图:

移动端兼容 - 占位符 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学堂(h5course-com)

原文发表时间:2015-08-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Nian糕的私人厨房

Vue2.0 路由配置及Tab组件开发

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

813
来自专栏编程微刊

jQuery实现多种切换效果的图片切换的五款插件

1531
来自专栏IMWeb前端团队

浅尝iconfont

1. iconfont简介 什么是iconfont?正如字面意思,就是图标字体,下面我给大家慢慢道来 web页面包含什么元素? 文字 链接 流媒体 视频 音频 ...

2397
来自专栏林德熙的博客

win10 uwp BadgeLogo 颜色

本文讲的是在上传应用商店出现BadgeLogo颜色问题,和如何解决,因为我是渣渣,本文可能带有一定的主观性和局限性,说的东西可能不对或者不符合每个人的预期。如果...

511
来自专栏韩东吉的Unity杂货铺

零基础入门 16: UGUI RawImage

今天的内容会很简单,也会很短,分享一下UGUI的RawImage,那什么是RawImage呢?

592
来自专栏知晓程序

电商类小程序实战教程 Vol.2:列表加载

843
来自专栏web前端教室

React虚拟DOM是个什么套路?

React最大的亮点就是快!天下武功,唯快不破,它走的就是这条路。那么它的快是如何达成的呢?是通过虚拟DOM,也就是它所说的Virtual DOM了。 那这个虚...

1848
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

850
来自专栏Python自动化测试

selenium中对富文本的处理

在互联网的很多产品中,富文本是经常存在的,因为在富文本中,可以插入图片,插入视频以及对字体等等可以进行调整,对于web的自动化测试人员来说,对于富文本的操作是...

1033
来自专栏DannyHoo的专栏

改变UITextField的光标颜色

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

842

扫码关注云+社区