h5键盘弹出收起时引起的页面变化

本文主要是介绍h5键盘弹出收起时引起的页面变化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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-ignorepageFooter[0].style.display = "none";} else {// @ts-ignorepageFooter[0].style.display = "block";}})();};
}

这篇关于h5键盘弹出收起时引起的页面变化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---