【系列】移动端项目经验 表单兼容(上篇)
移动端 表单兼容(上篇)
HTML5学堂:从这篇文章开始,我们将为大家总结介绍移动端的常见兼容问题,今天要提的是关于表单的一些兼容问题,本文主要包括input文本框的bug;默认的按钮样式;IE10的文本框问题;默认高光样式的处理。
前面想说的一些话:自己有一个学生在接触移动端,也辛辛苦苦的总结出了一些移动端的兼容问题,发布了一篇手记似的博文,然后,没过多久就发现被各种网站复制走,各个网站也不加任何出处,也不进行文中错别字的修改,更不必说调整语言了。必须承认,互联网虽然给我们带来了不错的分享平台,但是也带来了各种冗余的信息。说实在的,作为写了几年原创文章的自己来说,看到自己的文章或者别人的文章被抄走,感觉还是挺不舒服的。
对于移动端的兼容问题,由于内容较多,决定书写成一个系列。在这些杂乱知识的发现与整理,主要来源于几个讲师平时的积累,而自己的学生——黄艺斌也为内容的充实做出了很大的贡献,在此非常感谢~!不再多说,一起进入今天的主要内容。
移动端兼容 - fixed定位的input
移动端系统:iOS 微信当中
功能描述:在我们的移动端网页当中,经常会在顶部出现搜索栏。搜索栏的位置处理方式通常是使用到position:fixed进行定位处理的。当我们需要在文本框当中输入内容时,必然会点击input/textarea元素,使其处于聚焦状态,这个时候,搜索栏的位置会发生变化,不再锁定于页面顶端,而是变成居中显示状态。
触发条件:input元素或textarea元素进行了fixed的定位处理,同时触发focus(聚焦)状态,设备弹出键盘时会触发bug
解决方法:用一个标签模拟input/textarea,将真正的悬浮文本框隐藏起来。当点击模拟的文本框时,锁住整个页面的同时,隐藏模拟文本框,显示实际悬浮文本框。
测试效果图:
fixed定位的input 正常状态
fixed定位的input BUG状态
移动端兼容 - iPhone、iPad的按钮默认样式
移动端系统:iOS设备中的网页
功能描述:在进行表单中的按钮元素样式设置时,有时会处理按钮的背景以及圆角等特性,但是在iPhone以及iPad当中(即iOS系统),存在一种默认的渐变效果。
触发条件:针对表单元素的按钮进行样式设置。
解决方法:需要额外为webkit内核浏览器增加如下代码。
input[type='button'], input[type='submit'], input[type='reset'], textarea {
-webkit-appearance: none;
}
测试效果图:
默认按钮样式
加代码处理后的按钮样式
欢迎沟通交流~HTML5学堂
移动端兼容 - IE10下的文本框
移动端浏览器:IE10(当前11还没有测试)
功能描述:在文本框输入内容之后,IE10增加了一个新功能,会在文本框的右侧显示一个叉号,用于让用户快速清空文本框的内容。
触发条件:文本框中含有内容
解决方法:为IE浏览器(-ms内核前缀)增加如下代码。
input::-ms-clear {
display: none;
}
测试效果图:
移动端处理 - 默认高光样式的处理
功能描述:这个应该并不能算是移动端的兼容问题了,因为很多浏览器(webkit内核)均存在这个问题,对于a标签、聚焦时的input元素都存在这种高光效果。而我们有时候为了用户体验需要修改这种样式(颜色)或者取消这种样式。
解决方法:为webkit内核浏览器增加如下代码。
input:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-modify: read-wraite-plaintext-only;
}
测试效果图:
关于表单的兼容问题,这里就告一段落,下一篇文章继续啦~~~感谢各位的支持~!
- scrapy回调函数传递参数
- python更新数据库脚本两种方法
- 使聊天机器人具有个性
- 遇到502错误,invalid request block size 解决方法
- python中json.loads,dumps,jsonify使用
- sqlalchemy和flask-sqlalchemy几种分页操作
- 一个 tflearn 情感分析小例子
- 前端js,后台python实现RSA非对称加密
- 运行mysql时,提示Table ‘performance_schema.session_variables’ doesn’t exist
- ODL应用开发之MD-SAL中级教程
- Sql参数是一个list的最佳实践
- MyBatis 配置输出日志,不输出SQL问题解决
- lombok让你提高代码整洁度的神器附教程及原理分析
- mvn编译的时候一个破错误,google只有3个结果maven : Failed to install metadata project Could not parse metadata maven-
- 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 数组属性和方法
- 牛客网-删除链表中重复的节点
- 牛客网-包含min函数的栈
- 牛客网-反转链表
- 牛客网-替换空格
- 手把手教你破解文件密码、wifi密码、网页密码
- 如何安装 Elastic 栈中的 Logstash
- 你的GitHub项目被封存到北极了吗?
- Logstash: 如何创建可维护和可重用的 Logstash 管道
- 手把手教你微信好友头像形成指定的文字
- Logstash: 应用实践 - 装载 CSV 文档到 Elasticsearch
- LeetCode 剑指 Offer 28. 对称的二叉树
- Mysql拼接查询结果
- 手把手教你如何重建二叉树(超精彩配图)
- 一文搞定插入排序算法
- LeetCode 107. 二叉树的层次遍历 II