软键盘弹出影响webapp中固定定位的问题

最新推荐文章于 2023-12-29 14:16:21 发布

我还记得那天夕阳下的奔跑

最新推荐文章于 2023-12-29 14:16:21 发布

阅读量2.6k

点赞数

分类专栏：问题记录文章标签： web app 前端布局

本文链接：https://blog.csdn.net/qq_36584352/article/details/78550757

版权

问题记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近用html做app时，在修改密码页面弹出的软键盘将固定在页面底部的按钮顶上来了，导致布局有一定的混乱。我查阅了相关资料解决此问题。这里做一个记录。

原因：某些安卓机下键盘弹起会引起窗口高度（html标签的高度）变小，而fixed定位是相对于html根元素的，所以会被顶上来。如下图：

html如下：

<body>

<div class="container has-nav has-bottom">

    <div class="pwd-bg"></div>

    <div class="pwd-box">

        <form>

            <p class="old-pwd"><span></span><inputid="oldPwd"type="password"placeholder="输入旧密码"></p>

            <p class="new-pwd"><span></span><inputid="newPwd"type="password"placeholder="输入新密码，8-16位数字和字母组成"></p>

            <p class="confirm-pwd"><span></span><inputid="confirmPwd"type="password"placeholder="确认新密码"></p>

        </form>

    </div>

</div>

<footer class="footer">

    <a href="javascript:;" id="js-confirm" class="footer-button confirm">确认</a>

    <a href="javascript:;" id="js-cancle" class="footer-button close">取消</a>

</footer>

</body>

解决办法：

1、

$('input').on('click',function( ){

    $('.footer').css({'position':'static'})

});

$('input').on('blur',function( ){

    $('.footer').css({'position':'fixed'})

});

存在的问题：当输入第三个input框时，会复现上图的情况。

2、

window.onresize= function(e){

    if(window.innerHeight< $('body').height()){

        $('.footer').css({'position':'static'});

    }else{

        $('.footer').css({'position':'fixed'});

    }

}

解决了此问题。监听窗口大小变化窗口高度小于页面高度时清除定位。