IOS输入框固定

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

1:前言

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

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

1:固定在顶部的

2:固定在底部的

3:在文档流中的

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

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

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

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

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

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

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

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

我个人有在IOS下,和Android下测试一下,结果如下:

上输入框,在IOSAndroid下,都正常

下输入框,在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:内如区域的高度,超过一屏

就这两个问题,我们前面已经看到了一种情况,就是当文档不超过一屏时,在IOSAndroid下的表现效果,还是可以接受了,除了在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下的一些易发状况,以及处理方式。

总结

本篇文章,想说一下,在移动端布局中,关于输入框的固定布局,会出现的状态,以及解决方案,至于普通流中的情况,之后总结后再来写一篇总结。

本篇到此为止。

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

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

IOS输入框固定》有2个想法

  1. qq:2416118450说道:

    底部固定了,但是顶部被弹上去了 iphone 6 11.2

  2. city说道:

    博主 我看了好多你这篇写的很好,我是单屏布局内容比较多,然后输入框是fixed在底部,用的你的方案基本问题不大,但是ipone还有点问题 第一次会被软键盘遮住,然后结合通过

    interval = setInterval(function() {
    document.body.scrollTop = document.body.scrollHeight
    }, 100);
    解决了问题, 感谢博主