h5页面采用 position absolute和fixed布局时,安卓键盘弹起时,采用absolute和fixed布局的标签也会跟随滑动,会遮挡正常页面,导致正常页面不能正常操作。
方法一是:采用 input框聚焦和失焦的时候,做一些操作,但这个方法有可能效果不是很好,因为聚焦时,软键盘可能存在不会弹起的bug。
方法二是采用 监听页面是否有变化来做一些操作,安卓软键盘弹起时,安卓键盘占据了页面的一部分空间,所以此时页面高度会比没有弹起来变小,就有了操作空间。
export default {
data() {
return {
fullHeight:document.documentElement.clientHeight, // 保存初始高度
allHeight:document.documentElement.clientHeight,
};
},
mounted(){
var that=this;
window.onresize = () => {
return (() => {
window.fullHeight = document.documentElement.clientHeight
that.fullHeight = window.fullHeight
// < 说明安卓软键盘弹起来了
if(that.fullHeight<that.allHeight){
that.show_buttom_text=false;
}else{
that.show_buttom_text=true;
}
})()
}
},
methods: {
}
};