布局更改,关闭键盘后,布局没回弹"/>
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 移动端 点击输入框软键盘弹出,页面布局更改,关闭键盘后,布局没回弹
发布评论