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

移动端 表单兼容(上篇)

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;
}

测试效果图:

关于表单的兼容问题,这里就告一段落,下一篇文章继续啦~~~感谢各位的支持~!

原文发布于微信公众号 - HTML5学堂(h5course-com)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第134天:移动web开发的一些总结(二)

width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orien...

1561
来自专栏玩转全栈

小程序怎么将视觉搞实现成ui

这个真的是强烈建议,对于一个页面,首先应该大致的看一下可以划分为哪几个模块,通常的划分方式是,整体来看,是row排列,还是column排列的,那么,最擅长做这种...

32517
来自专栏HTML5学堂

DIV+CSS布局和TABLE布局的优缺点

HTML5学堂:TABLE布局是早以前CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,...

3349
来自专栏Jacklin攻城狮

翻译_iOS视图编程指南(View Programming Guide for iOS)之视图和窗口体系

前些日子,我发布一个苹果官方文档的翻译,之后就有不少同学朋友问我:翻译苹果官方文档能做什么,开发过程用到的时候很少,浪费时间,还又没什么用。今天,刚好有时间,就...

814
来自专栏JadePeng的技术博客

jQuery Mobile 教程 (1)

    移动互联网是块诱人的大蛋糕,在手机屏上,到底是C/S横扫一切,还是B/S力争一席之地?我相信,B/S还是很有希望的。在找移动Web App开发的资料,发...

3596
来自专栏我分享我快乐

Adobe animate cc 界面解读

我们都知道Adobe animate cc 可帮助我们不用写代码的情况下完成简单的交互动效实现,但是对于初学者而言,英文界面成为想关注它的人望而却步。首先,我强...

43415
来自专栏前端小作坊

CSS vs JS动画:谁更快?

Javascript 动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富...

2352
来自专栏贤羽的前端小栈

探索 PHP 与 Vue 通用直出模板方案

我们通常说的“页面直出”,其实就是服务端渲染(SSR, Server-Side Render)。最初的 JS SPA 方案有个常见的问题,就是脚本没有加载执行完...

2.8K2
来自专栏知晓程序

开发 | 小程序做动画效果难?送你一个框架,10 分钟就能搞定

在小程序中使用 canvas 绘制图案、动画的难度有目共睹。除了本身写法繁琐,小程序的技术特性,也使得小程序无法使用普通 HTML 5 的 canvas 框架,...

1435
来自专栏前端知识分享

第132天:移动web端-rem布局(进阶)

      该方案使用相当简单,把下面这段已压缩过的 原生JS(仅1kb,源码已在文章底部更新,2017/5/3) 放到 HTML 的 head 标签中即可(注...

1333

扫码关注云+社区