// Vue指令,解决IOS软键盘关闭后,被撑起的页面无法回退到原来正常的位置 Vue.directive('resetInput', { inserted(el) { // if (browser.versions.android) return el.__reset_input_handler = () => { window.scrollTo(0, Math.max(scrollHeight - 1, 0)) // 有些手机会有延迟,再做一次 setTimeout(() => { window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 100) } el.addEventListener('blur', el.__reset_input_handler) }, unbind(el) { // if (browser.versions.android) return el.removeEventListener('blur', el.__reset_input_handler) delete el.__reset_input_handler } })
微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位- 当前 Bug 的表现(可附上截图) 微信打开网页; 微信IOS 6.7.4 键盘弹起页面上滑,键盘收起页面不会回到原位置,导致弹框(css设置position为fixed会有问题,absolute不会有问题)后按钮响应区域错位。[图片] (如图:键盘收起,页面没有回到原来的位置) - 预期表现 点击区域正常响应 - 复现路径 1、打开网页:https://img.zai-art.com/web/app/demo/weixin.html 2、输入框光标聚焦,键盘弹出 3、收起键盘,点击 “弹框” 按钮 4、点击弹框中的 “点我” 按钮 (正常响应弹框会消失) - 提供一个最简复现 Demo 源代码 https://haodaking.github.io/demos/wechat/weixin.html 预览 https://img.zai-art.com/web/app/demo/weixin.html
2019-01-14