移动端ios 输入框fixed固定在底部 焦点时乱跳加遮盖问题的解决 转自zhangyunling 加个人项目解决方案

如果您有过移动端的开发经验，那么您是否碰到过这样的问题，一个页面有输入框，当这个输入框聚焦时，输入框在IOS下，被移动到手机屏幕的当中去了，而在Android端，有些浏览器的输入框，会被键盘盖住。

1：前言

接下来就以最常见的顶部和底部固定输入框来看一下，问题的来源，以及折中的解决方案

输入区域，在移动端基本上，只用于三种情况

1：固定在顶部的

2：固定在底部的

3：在文档流中的

我们这里，首先以固定在顶部和底部的为例，来看看它的一些表现。

而这里的问题展示，也是通过一些示例来展示，而在每个示例中，都是使用的最简单的元素，最简单的布局，来展示这个问题

2：文档高度没有超过一屏

大部分的顶部输入框，出现的情况都是不会超过一屏的，如果超过一屏，那么大部分的处理方式就是，这个顶部的输入框是在文档流内部的，不是一直固定在页面顶部的，而当输入框点击之后，直接跳转到一个单独的搜索页，而搜索页的内容，一般都是不太多的，基本只包含一些提示信息，并且，在搜索页的输入框，也不是那种固定在顶部的。就比如流量那么大的“淘宝的H5页面”;

这里加一句题外话，其实在移动端的布局中，已经很少有局部是固定布局的了，尤其是一些不常用的功能，原因可以想象为，移动端的可视区域就那么一些，如果很多元素采用了固定布局，那么有效的内容元素，可以展现的就更少了，所以一般除非必要，是不会出现固定布局这样的情况的？

扯了那么多，接下来就先看看示例吧

如果您在PC端，想要移动端测试一下，请扫码：

如果您在移动端，或者在PC端，想要看下源代码：滚动区域，不大于一屏的DEMO

我个人有在IOS下，和Android下测试一下，结果如下：

上输入框，在IOS和Android下，都正常

下输入框，在IOS下，会弹到键盘上面，虽不是紧挨着键盘，但是情况可以接受。

下输入框，在Android的某些浏览器下，会被盖住，在大部分浏览器下，都是紧挨着键盘的

3：文档高度超过一屏

有时候，会有这么一种情况，我固定在顶部和底部的输入框，就是需要在一个很大的页面中，有一个固定在顶部或者是底部的输入框，比如一些实时聊天的界面，或者是弹幕交互的界面。

但是呢，除了这些固定之后，其他的一些元素，是占据了很大文档空间的，就是说，其他的元素高度，是超过一屏的高度的，所以来看看这个时候的情况：

如果您在PC端，想要移动端测试一下，请扫码：

如果您在移动端，或者在PC端，想要看下源代码：滚动区域，大于一屏的DEMO。

该情况，如果您是Android机的话，这里可以不做测试，因为其展示形式，和文档不超过一屏的展示形式，基本一样的，该出什么问题，还是有什么问题，这里主要是IOS下的问题，而且问题非常严重。

如果您没有发现问题，那么就把页面滚动到最底部的时候，点击顶部的输入框，把页面滚动到最顶部的时候，点击固定在底部的输入框，就可以看到问题了。

我看到的结果，可以描述如下：

Android：上输入框表现正常，下输入框：相同的问题，有的表现正常，有的会被键盘盖住

IOS下：上输入框，会把body的滚动区域，整体滚动到最上面，导致错位

IOS下：下输入框，会把body的滚动区域，整体滚动到最下面，导致错位

当body的区域，大于一屏时，基本IOS下的输入框上下固定，是不可用的

4：小结

我们来总结一下，上面两个示例的情况：

1：输入框是固定在顶部和底部的，使用的是fixed的

2：其他的内容区域是普通文档流，文档高度试了两种：不超过一屏和超过一屏

这里因为是给的最简单的示例，那么就代表着，基本不会受到其他属性的影响，那么问题就来了：

首先，输入框固定在顶部和底部，使用fixed是没有问题的，不然无法固定，也不能实时的去计算，而且在IOS下，当页面在滚动的时候，为了有更好的滚动体验，是停止CSS渲染和JS的执行的，所以也不能实时的去计算，然后进行固定，所以使用fixed的固定，是必须要使用的。

那么，问题就只剩下两个了：

1：内容区域是普通文档流

2：内如区域的高度，超过一屏

就这两个问题，我们前面已经看到了一种情况，就是当文档不超过一屏时，在IOS和Android下的表现效果，还是可以接受了，除了在Android的某些浏览器下，底部输入框会被键盘盖住之外，并没有其他的不好的效果，尤其是顶部输入框，都是可以完美的使用。

所以，这里的问题解决方案，就只剩下了一个，那么就是控制高度最多显示为一屏的内容，这个也是我认为的，一个不错的解决方案，移动端单屏布局方式。

虽然是单屏，但是内容区域，总不能限制为一点点内容了，所以，这里剩下的解决方案，就只剩下了一种，内容区域也使用固定布局

重新多添加一层div，该元素把所有非固定布局的元素包含在内（固定布局的不要包含，有问题的，这个在之后再写一篇文章，来说明这个问题）。让这个div占据屏幕的可视区域，但是，又不让这个区域超出一屏的内容。所有的非固定元素，都在该div内部滚动，那么接下来，就看看效果如何吧。

5：单屏布局方式–解决方案

其主要的HTML和CSS如下：

<div class="input-top">
    <input class = "input" type = "text" placeholder = "顶部输入框" />
</div>
<div class="input-bottom">
    <input class = "input" type = "text" placeholder = "底部输入框" />
</div>
<div class="wrapper">
    该元素区域，占据很大的高度
</div>

.wrapper{
    position:absolute;
    top:30px;
    left:0px;
    right:0px;
    bottom:30px;
    overflow:auto;
    -webkit-overflow-scrolling : touch;
}

查看示例效果：

如果您在PC端，想要移动端测试一下，请扫码：

如果您在移动端，或者在PC端，想要看下源代码：单屏布局方式-解决上下输入框固定在顶部和底部的DEMO

表现效果：

Android：上输入框表现正常，下输入框：相同的问题，有的表现正常，有的会被键盘盖住(会出现该情况的手机，占据少数，而且跟浏览器相关)

IOS下：上输入框表现正常

IOS下，下输入框会弹到键盘上面，虽不是紧挨着键盘，但是情况可以接受。

所以这种情况下，是可以使用的，最好再把Android下的问题，解决一下，那么该方法，将是固定输入框的最佳解决方案了

Android的手机，表现形式依然和前面的两个示例，基本一致。

主要还是看IOS的表现了，从示例中，可以看到，表现与第一个示例，表现差不多，原因在于，它就是属于第一种的情况，文档高度，是低于一屏的。其表现形式也是很给力，顶部输入框，可以完美的解决，底部输入框稍微跳动，不过可以接受。

如果您使用这种布局，而且需要的是顶部输入框固定的话，而且又不能跳转新页来实现该方法的话，那么单页布局方式，将会非常有效，所以请考虑。

6：输入框在普通流中

单页布局，只适用于，需要固定布局的时候，其他的时候，还是使用普通流布局为好，毕竟越普遍的东西，其兼容性会越好，虽然理论上，单页布局，不会出现其他的问题，但是谁又能保证一些浏览器，会被使用者，改成什么样子呢。

而固定布局，其实也主要是为了解决IOS端的问题，对于Android端的，其实大可以直接使用普通布局来实现的，只是如果写两套的话，也有些麻烦的。

那么我们再来看看，输入框在普通文档流内部时的情况吧：

这个情况，在我看来，应用场景，是比前面固定布局的应用场景多的。该部分的内容，本篇就不做说明，因为虽然有些想法，但当前这些想法并没有在实际中应用过，也没有测试过一些机型，没有经过验证的东西，说出来就会变得有些不负责任了。

待我之后在项目中，以项目为试验对象，总结研究过之后，再来说说普通流中，输入框在Android下的一些易发状况，以及处理方式。

总结

这位博主写的很详细但是还有些问题 ipone中第一次焦点时软键盘会遮住部分输入框，

使用焦点时

 interval = setInterval(function() {
    document.body.scrollTop = document.body.scrollHeight
}, 100);
失去焦点取消

clearInterval(interval);
可以解决遮住的问题

本篇到此为止。

如果您发现文中有描述错误或者不当的地方，请留言指出，不胜感激，谢谢！

本文属于原创文章，如需转载，请注明出处，谢谢！

本文地址：http://www.zhangyunling.com/?p=579