已解决
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%的人还看了
相似问题
- 键盘映射笔记
- antv/x6 键盘快捷键事件
- 使用键盘管理器更改键盘快捷键,让键盘真正迎合你的使用习惯
- UEFI实战——键盘操作
- Android开发:(AndroidStudio模拟器)如何将模拟器语言设置为中文 模拟器输入法更改为中文输入 键盘输入中文
- Linux输入设备应用编程(键盘,按键,触摸屏,鼠标)
- 【笔记1-2】Qt系列:QkeyEvent 键盘事件 设定快捷键
- GPT-4V-Act :一个多模态AI助手,能够像人类一样模拟通过鼠标和键盘进行网页浏览。
- 掌握键盘快捷键,在没有鼠标的情况下,也还是可以做到游刃有余,甚至可以用数字键来代替鼠标
- USB复合设备构建CDC+HID鼠标键盘套装
猜你感兴趣
版权申明
本文"vue element 移动端 点击输入框软键盘弹出,页面布局更改,关闭键盘后,布局没回弹":http://eshow365.cn/6-32065-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!