【前端开发】解决ios设备上fixed浮动的input输入框兼容问题

我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的。比如底部输入框的搜索功能,或底部输入框的写评论功能。

 

这种问题,我们一般会使用的方法是一个position:fixed;的div,在里面放一个input,浮动在顶部或底部,其他的内容可以滚动。

这种方法在安卓设备中肯定是没问题的。但是在ios设备中就会有问题了。

问题1:滚动页面内容部分时,浮动部分可能会消失,滚动结束后才展示出来

问题2:点击输入框进行输入时,呼出键盘后,输入框位置漂移了。

如视频效果:

 

这两个问题,之前在网上确实找过很多方法,也试过,但是都不太理想。

之前因为时间问题,所以就只使用了这种方法:

输入框获取焦点时,得到页面的滚动高度,将输入框div使用absolute绝对定位到当前滚动高度处,并禁止滚动。失去焦点后,将输入框div变回fixed,回到原来样子。

但此方法并不是很理想。只能勉强解决顶部浮动输入框的输入问题,但是页面滚动时,浮动区域消失和底部输入框问题无法得到解决。所以此方法就不适应了。

 

我们来看看新的方法。(此方法的原理是不适应fixed,全内容的高度就是body的整体高度,这样滚动起来就可以处理这些问题了,关键就是用到了有滚动条的div)

首先我们结构还是一样。页面3个外层div,有顶部input与底部input,中间的可滚动内容通过js计算出来。(这里注意,要关联计算当前页面的所有高度,让内容正好充满一屏)

<div class="fixedTop" alt="顶部不动的div">
    <input type="text" name="" value="输入框1">
</div>
<div class="centerContent">
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
</div>
<div class="fixedBottom" alt="底部不动的div">
    <input type="text" name="" value="输入框2">
</div>

css

     *{
            margin:0;
            padding: 0;
        }

        .fixedTop{
            height: 30px;
            width:100%;
            background-color: red;
        }
        .fixedBottom{
            height: 30px;
            width:100%;
            background-color: red;
        }
        .centerContent{
            overflow: auto;/*让div存在滚动条*/
            /*解决ios中滚动div的卡顿问题*/
            -webkit-overflow-scroll:touch;
            -webkit-overflow-scrolling: touch;
        }
        .fixedTop input,.fixedBottom input{
            width: 100%;
            height:30px;
        }

.centerContent的高度通过页面整体高度-顶部div高度-底部div高度获得

js操作:

    var centerContentH=window.innerHeight-$(".fixedTop").height()-$(".fixedBottom").height();//可滚动区域高度
    $(".centerContent").css({"height":centerContentH});
    //底部输入框操作 输入框获取焦点时,将页面滚到最底部去
    $(".fixedBottom input").focus(function(){
        setTimeout(function(){
            $(window).scrollTop(window.innerHeight);
        },500);
    });

用这种方法,我们来看下效果:

 

看,是不是就实现了

 

我们来看看全部代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>解决</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }

        .fixedTop{
            height: 30px;
            width:100%;
            background-color: red;
        }
        .fixedBottom{
            height: 30px;
            width:100%;
            background-color: red;
        }
        .centerContent{
            overflow: auto;/*让div存在滚动条*/
            /*解决ios中滚动div的卡顿问题*/
            -webkit-overflow-scroll:touch;
            -webkit-overflow-scrolling: touch;
        }
        .fixedTop input,.fixedBottom input{
            width: 100%;
            height:30px;
        }
    </style>
</head>
<body>
<div class="fixedTop" alt="顶部不动的div">
    <input type="text" name="" value="输入框1">
</div>
<div class="centerContent">
    1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>
</div>
<div class="fixedBottom" alt="底部不动的div">
    <input type="text" name="" value="输入框2">
</div>
<script type="text/javascript">
    var centerContentH=window.innerHeight-$(".fixedTop").height()-$(".fixedBottom").height();//可滚动区域高度
    $(".centerContent").css({"height":centerContentH});
    //底部输入框操作 输入框获取焦点时,将页面滚到最底部去
    $(".fixedBottom input").focus(function(){
        setTimeout(function(){
            $(window).scrollTop(window.innerHeight);
        },500);
    });
</script>
</body>
</html>
整体代码

 

posted @ 2018-03-01 17:46 海瑞菌·博客 阅读(...) 评论(...) 编辑 收藏