移动端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);
可以解决遮住的问题
本篇到此为止。
如果您发现文中有描述错误或者不当的地方,请留言指出,不胜感激,谢谢!
本文属于原创文章,如需转载,请注明出处,谢谢!