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

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

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 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

用多个类别来进行微调

          有时css的类基本设计好了,对于大多数的标签都能够实用,但却又个别的不行。如,菜单项,绝大多数都是2个字的,总体上按照这个宽度来设计,但还有...

2008
来自专栏Nian糕的私人厨房

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

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

1013
来自专栏macOS 开发学习

Mac开发跬步积累(五): Dark Mode下适配你的UI界面

在macOS 10.9+ 的时候,苹果就提供了NSAppearance这个类来协助AppKit管理App的UI控件. NSAppearance决定着AppKit...

942
来自专栏姬小光

姬小光前端兴趣班【第010期】- 浏览器开发工具

前面几期我们学习了切图大法,我相信只要你认真学完,就可以立即派上用场。比如可以将你喜欢的图片切成个人主页,也可以将贺卡图片做成带链接的邮件等等。

802
来自专栏DeveWork

移动端UC /QQ 浏览器的部分私有Meta 属性

如同桌面端一样,在国内做web 移动开发的话肯定得考虑下移动端占有率靠前的几个国产浏览器的一些适配工作。好在当前移动端浏览器都是wekit 内核一霸天下,单从这...

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

零基础入门 16: UGUI RawImage

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

742
来自专栏liulun

学习WPF——使用Font-Awesome图标字体

图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可...

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

2 HTML5基础

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

1030
来自专栏非著名程序员

【周末分享】解决中文排版错位的JustifiedTextview控件

1、FlowingDrawer 效果 ---- ? 2、Justifiedtextview 说明 ---- android中textview在中文排版时会出现无...

2108
来自专栏IMWeb前端团队

浅尝iconfont

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

2747

扫码关注云+社区