移动端兼容系列 表单兼容（上篇）

HTML5学堂：从这篇文章开始，我们将为大家总结介绍移动端的常见兼容问题，今天要提的是关于表单的一些兼容问题，本文主要包括input文本框的bug；默认的按钮样式；IE10的文本框问题；默认高光样式的处理。

前面想说的一些话：自己有一个学生在接触移动端，也辛辛苦苦的总结出了一些移动端的兼容问题，发布了一篇手记似的博文，然后，没过多久就发现被各种网站复制走，各个网站也不加任何出处，也不进行文中错别字的修改，更不必说调整语言了。必须承认，互联网虽然给我们带来了不错的分享平台，但是也带来了各种冗余的信息。说实在的，作为写了几年原创文章的自己来说，看到自己的文章或者别人的文章被抄走，感觉还是挺不舒服的。

对于移动端的兼容问题，由于内容较多，决定书写成一个系列。在这些杂乱知识的发现与整理，主要来源于几个讲师平时的积累，而自己的学生——黄艺斌也为内容的充实做出了很大的贡献，在此非常感谢~！不再多说，一起进入今天的主要内容。

移动端兼容 - fixed定位的input

移动端系统：iOS 微信当中

功能描述：在我们的移动端网页当中，经常会在顶部出现搜索栏。搜索栏的位置处理方式通常是使用到position:fixed进行定位处理的。当我们需要在文本框当中输入内容时，必然会点击input/textarea元素，使其处于聚焦状态，这个时候，搜索栏的位置会发生变化，不再锁定于页面顶端，而是变成居中显示状态。

触发条件：input元素或textarea元素进行了fixed的定位处理，同时触发focus（聚焦）状态，设备弹出键盘时会触发bug

解决方法：用一个标签模拟input/textarea，将真正的悬浮文本框隐藏起来。当点击模拟的文本框时，锁住整个页面的同时，隐藏模拟文本框，显示实际悬浮文本框，另外一种是在输入框的touchstart事件发生时，将position: fixed元素改成position: static，然后再将焦点聚焦到输入框中，然后输入框失焦时，再将其设置成position: fixed:

测试效果图：

fixed定位的input 正常状态

fixed定位的input BUG状态

移动端兼容 - iPhone、iPad的按钮默认样式

移动端系统：iOS设备中的网页

功能描述：在进行表单中的按钮元素样式设置时，有时会处理按钮的背景以及圆角等特性，但是在iPhone以及iPad当中（即iOS系统），存在一种默认的渐变效果。

触发条件：针对表单元素的按钮进行样式设置。

解决方法：需要额外为webkit内核浏览器增加如下代码。

1. input[type='button'], input[type='submit'], input[type='reset'], textarea {
2.     -webkit-appearance: none;
3. }

测试效果图：

默认按钮样式

加代码处理后的按钮样式

欢迎沟通交流~HTML5学堂

移动端兼容 - IE10下的文本框

移动端浏览器：IE10（当前11还没有测试）

功能描述：在文本框输入内容之后，IE10增加了一个新功能，会在文本框的右侧显示一个叉号，用于让用户快速清空文本框的内容。

触发条件：文本框中含有内容

解决方法：为IE浏览器（-ms内核前缀）增加如下代码。

1. input::-ms-clear {
2.     display: none;
3. }

测试效果图：

移动端处理 - 默认高光样式的处理

功能描述：这个应该并不能算是移动端的兼容问题了，因为很多浏览器（webkit内核）均存在这个问题，对于a标签、聚焦时的input元素都存在这种高光效果。而我们有时候为了用户体验需要修改这种样式（颜色）或者取消这种样式。

解决方法：为webkit内核浏览器增加如下代码。

1. input:focus {
2.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
3.     -webkit-user-modify: read-wraite-plaintext-only;
4. }

测试效果图：

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

欢迎沟通交流~HTML5学堂