移动端键盘弹起导致页面fixed定位元素布局失效

移动端键盘弹起导致页面fixed定位元素布局失效

移动端键盘弹起导致页面fixed定位元素布局失效,元素被软键盘顶上去了
h5开发移动端应用时登录页底部有一个隐私政策和服务协议的块,我用fixed定位到了底部,真机测试时,输入框聚焦,隐私政策那一块被顶到上面了

原因:当用户进行表单输入时，手机软键盘弹起，此时页面的尺寸发生变化，底部fixed定位的元素自然也会上移，可能就会覆盖页面中的某些元素。
解决方案:上面提到，产生这种情况的原因是软键盘弹起，窗口尺寸发生变化，那么就通过监听尺寸的方式解决一下这个问题（当键盘弹出时，将按钮隐藏；键盘收回时，将按钮显示出来）

1,data里声明变量

data() {
    return {
        docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
        showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
        hideshow:true  //显示或者隐藏footer
    }
}

2,监听页面高度

watch: {
    //监听显示高度
    showHeight:function() {
        if(this.docmHeight > this.showHeight){
            //隐藏
            this.hideshow=false
        }else{
            //显示
            this.hideshow=true
        }
    }
},
 
mounted() {
    //监听事件
    window.onresize = ()=>{
        return(()=>{
            this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
        })()
    }
}

3,设置元素的显示与隐藏

<el-button v-show="hideshow">确认操作</el-button>

亲测可用

参考链接: https://www.cnblogs.com/belongs-to-qinghua/p/12192846.html