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

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

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

相关文章

来自专栏子勰随笔

Markdown格式优化及使用技巧

2207
来自专栏walterlv - 吕毅的博客

像黑客一样!Chrome 完全键盘操作指南(原生快捷键 + Vimium 插件)

发布于 2018-07-01 11:56 更新于 2018-07...

242
来自专栏腾讯NEXT学位

让你的WEB和APP一分钟适配 iPhone X

3408
来自专栏静默虚空的博客

详谈如何定制自己的博客园皮肤

如果你仅仅想原封不动的使用本人的定制皮肤,而不想了解实现细节。那么你只需要完成以下几个步骤即可,后面的章节可以忽略。

870
来自专栏DeveWork

WordPress 注册页面显示自定义提示信息

如果你的WordPress 网站是多用户网站,那么在提供给用户注册的时候,可以自定义一些提示信息,比如说网站协议、版权声明之类的。把下面的代码放到主题的func...

1787
来自专栏林德熙的博客

win10 UWP 动画 动画入门

在 UWP 移动元素的动画,可以使用 RenderTransform 移动,然后使用动画修改 RenderTransform 进行动画。关于元素移动,请看 wi...

111
来自专栏韦弦的微信小程序

微信小程序button组件样式

需要使用微信小程序button组件的open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下:

374
来自专栏ytkah

换个字体解决Dreamweaver文字选不中的问题

  在使用Dreamweaver时,有时我们要选中一些字符进行编辑或删除,光标在英文字上面可以选中,在中文字上面就选不中,郁闷吧。比如在编辑下面这段文字的时候,...

2475
来自专栏飞扬的花生

一步一步学习Bootstrap系列--表单布局

前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把...

17910
来自专栏一“技”之长

iOS UIProgressView控件用法

- (instancetype)initWithProgressViewStyle:(UIProgressViewStyle)style;

802

扫描关注云+社区