本文主要是介绍vue VUX 移动端IOS H5 input键盘弹起页面被顶起，键盘'完成'收起后无法恢复正常，页面button错位导致无法触发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
描述：H5 页面使用vue，vux 中的x-dialog 组件开发了一个可以编辑的页面，点击编辑按钮x-dialog 出现并进行数据编辑
遇到的问题：在微信浏览器中进行编辑时Ios 键盘弹起会把页面向上顶起，然后键盘’完成’隐藏后页面没有复位，确认变更 按钮这时是错位的无法触发。
特别备注：IOS 自带浏览器，安卓自带浏览器（包括华为），安卓微信浏览器都没有此问题
解决办法：在mounted 中添加以下代码
mounted () {const u = navigator.userAgentconst isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)// 如果是IOS设备if (isiOS) {let flag = falselet pageBackNormFunc// 聚焦后，键盘弹起document.body.addEventListener('focusin', () => {flag = truepageBackNormFunc && clearTimeout(pageBackNormFunc)})// 失焦后，键盘关闭document.body.addEventListener('focusout', () => {if (flag) {// 页面滚动回原来的位置pageBackNormFunc = setTimeout(() => {window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })}, 200)}flag = false})}},
问题解决了！
这篇关于vue VUX 移动端IOS H5 input键盘弹起页面被顶起，键盘'完成'收起后无法恢复正常，页面button错位导致无法触发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
