在 IOS 12 的系统中,在输入框中输入完内容,当点击键盘上的完成按钮时,会发现页面底部会有一大段区域变成了白色的,高度就是原来弹起的键盘的高度,这时候如果将页面上下滑动下,会发现这块空白区域又会消失,页面也恢复了正常。
看了很多文章后发现,解决思路基本都是一样的,也就是想办法监听键盘的收起状态,在键盘收起的监听回调里面将页面滚动到顶部或底部,或者是滚动一点点。
在尝试了N多代码后,发现大部分文章中贴出的代码并没有起作用,或者是还不够完美,不能满足我的需要。
最后我总算是找到了二种算是能够比较好的解决这个问题的方法,并将它们封装为 Vue 的自定义指令,这样的话,只需要在 input 或 textarea 标签上绑定这个自定义指令就可以解决这个问题。代码如下:
import Vue from 'vue'
/**
* 自定义指令 v-reset-page,以解决 iOS 12 中键盘收起后页面底部有留白的问题
*/
Vue.directive('resetPage', {
inserted: function (el) {
// 监听键盘收起事件
document.body.addEventListener('focusout', () => {
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
//软键盘收起的事件处理
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
window.scrollTo(0, Math.max(scrollHeight - 1, 0))
}, 100)
}
})
}
})
定义好自定义指令后,只需要在 main.js 中引入就可以使用了
//引入ios键盘消失错位·
import "@/assets/js/keyUp";
最后在input中引用
<input v-reset-page type="text>