当前位置:首页 > 编程笔记 > 正文
已解决

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

来自网友在路上 11028102提问 提问时间:2023-11-04 18:34:36阅读次数: 102

最佳答案 问答题库1028位专家为你答疑解惑

这周做了一个移动端页面,部署上去发现,只要输入框点击输入消息,布局就会被顶上去,底部栏按钮在键盘关闭后也无法回到原来位置,我这里中间的内容区做了动态设置高度,所以就只需要在软键盘关闭后重新调用计算高度的方法即可。需要注意的是安卓和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;},
查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"vue element 移动端 点击输入框软键盘弹出,页面布局更改,关闭键盘后,布局没回弹":http://eshow365.cn/6-32065-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!