在进行聊天界面开发的时候,发现安卓手机键盘会把界面顶起,但是不会收回来,在网上找到了这个方法解决
const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
window.onresize = ()=>{
return(()=>{
//键盘弹起与隐藏都会引起窗口的高度发生变化
const resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
console.log("进入到判断页面高度=========");
console.log("页面初始高度========="+originalHeight);
console.log("软键盘弹起高度========="+resizeHeight);
if(resizeHeight-0<originalHeight-0){
//当软键盘弹起,在此处操作
console.log("进入到软键盘弹起=========");
document.querySelector('body').setAttribute('style', 'height:'+originalHeight+'px;');
this.scrollerHeight=resizeHeight;
}else{
//当软键盘收起,在此处操作
console.log("进入到软键盘收起=========");
document.querySelector('body').setAttribute('style', 'height:100%;');
this.scrollerHeight="100%";
}
})()
}
之前我是在mounted中根据document.activeElement.tagName的值判断是否为INPUT去改变键盘弹起的高度
window.addEventListener("resize", () => {
if (document.activeElement.tagName === "INPUT") {
}
});
但是在下方加了一个按钮之后,发现点击语音按钮后再切换到输入框,
document.activeElement.tagName的值变成BODY了,查找资料发现
document.activeElement仅对input、textarea等标准的输入文本有效;对于div等非编辑类的元素(即使开启了contentEditable),返回的值为BODY。
所以此方法在点击语音后再也调用不起来,困扰了一天的问题,记录一下