h5键盘弹出收起时引起的页面变化
键盘弹出时会导致窗口发生变化,置于底部的操作项会被顶上来,所以在键盘弹出的时候处理一下页面节点
- 通过监听页面窗口大小变化判断键盘状态
- 键盘弹出时隐藏底部操作项
- 在页面加载完成时执行即可
export function keyboardMonitor() {
const originalHeight =
document.documentElement.clientHeight || document.body.clientHeight; //监听事件
window.onresize = () => {
return (() => {
const resizeHeight =
document.documentElement.clientHeight || document.body.clientHeight;
//软键盘弹起与隐藏 都会引起窗口的高度发生变化
console.log(resizeHeight, originalHeight);
const pageFooter = document.getElementsByClassName("page-footer");
if (resizeHeight * 1 < originalHeight * 1) {
// @ts-ignore
pageFooter[0].style.display = "none";
} else {
// @ts-ignore
pageFooter[0].style.display = "block";
}
})();
};
}