解决软键盘弹窗 fixed失效问题

最新推荐文章于 2023-02-13 09:11:35 发布

徐子玉

最新推荐文章于 2023-02-13 09:11:35 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xuqipeter/article/details/79179346

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

概述

这个问题常出现在移动web开发中聊天或者留言页面的绝对定位输入框上，页面超过屏幕大小时候输入框focus状态下（键盘弹出）绝对定位的元素失效，导致页面滚动时候把定位元素一并带走，体验十分不好，在此留下一自己的方法，让更多的人不需要再爬这样的小坑。

解决办法

原理很简单，就是定义一个外框把页面包起来，把需要使用fixed定位的元素设置成absolute定位，然后设置外框元素的样式即可，下面是实例：
假设外框元素为.wrap，需要fixed定位的元素为.position：

DOM

<html>
    <body class="wrap">
        <div class="position">
            <input type="text" id="js-searchKey" class="search-input" placeholder="关键词搜索">
        </div>
    </body>
</html>

CSS

body.full-body{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: touch;
}
.fixed-bug{
    position: absolute !important;
}

JS

当input获取焦点，弹出软键盘的时候，就切添加解决bug的class；反之，删除解决bug的class。

function addBodyClass(element){
    $('body').addClass('full-body');
    $(element).addClass('fixed-bug');
}
function removeBodyClass(element){
    $('body').removeClass('full-body');
    $(element).removeClass('fixed-bug');
}
$("#js-searchKey").on('focus',function(){
    var $fixed=$('.position');
    addBodyClass($fixed);
});
$("#js-searchKey").on('blur',function(){
    var $fixed=$('.position');
    removeBodyClass($fixed);
});

徐子玉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决软键盘弹窗 fixed失效问题

概述这个问题常出现在移动web开发中聊天或者留言页面的绝对定位输入框上，页面超过屏幕大小时候输入框focus状态下（键盘弹出）绝对定位的元素失效，导致页面滚动时候把定位元素一并带走，体验十分不好，在此留下一自己的方法，让更多的人不需要再爬这样的小坑。解决办法原理很简单，就是定义一个外框把页面包起来，把需要使用fixed定位的元素设置成absolute定位，然后设置外框元素的
复制链接

扫一扫

专栏目录