vue element 移动端 点击输入框软键盘弹出，页面布局更改，关闭键盘后，布局没回弹

本文主要是介绍vue element 移动端 点击输入框软键盘弹出，页面布局更改，关闭键盘后，布局没回弹，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这周做了一个移动端页面，部署上去发现，只要输入框点击输入消息，布局就会被顶上去，底部栏按钮在键盘关闭后也无法回到原来位置，我这里中间的内容区做了动态设置高度，所以就只需要在软键盘关闭后重新调用计算高度的方法即可。需要注意的是安卓和ios软键盘关闭的时机是不一样的，安卓直接在resize事件里，而ios则在输入框失去焦点键盘关闭，具体代码如下

  handleWidth() {// 判断设备类型const u = navigator.userAgent;const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);console.log(isiOS, "isiOS");// 如果是IOS设备if (isiOS) {// 失焦后，键盘关闭document.body.addEventListener("focusout", () =>this.getTableContentHeight());} elsewindow.addEventListener("resize", () => this.getTableContentHeight());},// 高度自适应getTableContentHeight() {let drawerBodyDom = document.querySelector(".el-drawer__body");let drawerH = parseFloat(window.getComputedStyle(drawerBodyDom, null).height);let searchDom = document.querySelector(".el-row--flex.is-justify-space-between");let searchH = parseFloat(window.getComputedStyle(searchDom, null).height);let pageDom = document.querySelector(".el-drawer__body .el-pagination");if (pageDom) {this.pageH = parseFloat(window.getComputedStyle(pageDom, null).height);}let btnDom = document.querySelector(".drawer__footer");let btnH = parseFloat(window.getComputedStyle(btnDom, null).height);this.tableContentHeight =drawerH - searchH - btnH- this.pageH;},

这篇关于vue element 移动端 点击输入框软键盘弹出，页面布局更改，关闭键盘后，布局没回弹的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---