【系列】移动端项目经验 表单兼容(下篇)
【系列】移动端项目经验 表单兼容(下篇)
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”来关闭键盘默认首字母大写。
关于表单的兼容问题,这里就算告一段落了,下一篇文章继续为大家介绍移动端其他方面的兼容问题~~~感谢各位的支持~!
- 按分类统计商品总数的性能优化思考
- 机器学习之Python基础(一)
- 中国造机器人突破新高,将大量挤压就业空间,明天在哪里打工?
- 嵌入式数据库Perst
- USB 设备的PID-Product ID,VID-Vendor ID
- Asp.Net4.0/VS2010新变化(3):webform中也可以直接url路由
- IIS7上部署Asp.Net4.0时UrlRouting的若干问题
- As3.0中的反射
- 域名yg.cc以10.2万元的价格结拍,可搭建“摇滚”音乐平台
- 修改 Windows Host 文件工具
- win7下恢复“经典任务栏”/“快速启动栏”,关闭“窗口自动最大化”
- WCF和ASP.NET Web API 接口执行时间监控
- 额的神啊:AS3中Button被disable了,也会触发Click事件!
- [原创]CI持续集成系统环境---部署gerrit环境完整记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- P1089 津津的储蓄计划(模拟训练)
- 二分练习 --D - Trailing Zeroes (III)
- HDU 5806
- B - They Are Everywhere CodeForces - 701C
- 尺取练习 -A - A - Stages (水题压压惊)
- 填坑-回溯-预习 之 二分-尺取大总结
- 深入浅出理解动态规划(一) | 交叠子问题
- 深入浅出理解动态规划(二) | 最优子结构
- 用x种方式求第n项斐波那契数,99%的人只会第一种
- 面试官:手撕十大排序算法,你会几种?
- 如何在Integer类型的ArrayList中同时添加String、Character、Boolean等类型的数据?
- Java开发岗面试题--基础篇(一)
- leetcode链表之找出倒数第k个节点
- MAC下安装nginx的正确姿势 实践笔记
- 关于 ThreadLocal 你需要知道的几点