Vue 爬坑之旅 -- 用自定义指令解决 IOS 12 中键盘收起后页面底部有留白的问题

亦凉 2023-10-11 13:57 48阅读 0赞

在 IOS 12 的系统中，在输入框中输入完内容，当点击键盘上的完成按钮时，会发现页面底部会有一大段区域变成了白色的，高度就是原来弹起的键盘的高度，这时候如果将页面上下滑动下，会发现这块空白区域又会消失，页面也恢复了正常。

当初第一次碰到这个问题时，真的是一脸懵逼，这特么是什么情况。多方查找后发现原来这不是个案，很多人都碰到过，而且也有各种各样的解决方案。

看了很多文章后发现，解决思路基本都是一样的，也就是想办法监听键盘的收起状态，在键盘收起的监听回调里面将页面滚动到顶部或底部，或者是滚动一点点。

在尝试了N多代码后，发现大部分文章中贴出的代码并没有起作用，或者是还不够完美，不能满足我的需要。

最后我总算是找到了二种算是能够比较好的解决这个问题的方法，并将它们封装为 Vue 的自定义指令，这样的话，只需要在 input 或 textarea 标签上绑定这个自定义指令就可以解决这个问题。代码如下：

import Vue from 'vue'  
/\*\*  
\* 自定义指令 v-reset-page，以解决 iOS 12 中键盘收起后页面底部有留白的问题  
\*/

Vue.directive('resetPage', \{  
inserted: function (el) \{  
// 该方法有时候会出现点击了键盘右上角完成按钮，键盘收起又弹出的情况  
// el.addEventListener('blur', function () \{  
// if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) \{  
// let currentPosition, timer  
// let speed = 1//页面滚动距离  
// timer = setInterval(function () \{  
// currentPosition = document.documentElement.scrollTop || document.body.scrollTop  
// currentPosition -= speed  
// window.scrollTo(0, currentPosition)//页面向上滚动  
// currentPosition += speed //speed变量  
// window.scrollTo(0, currentPosition)//页面向下滚动  
// clearInterval(timer)  
// \}, 100)  
// \}  
// \})  
  
// 监听键盘收起事件  
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 中引入就可以使用了

// main.js 中引入  
import './utils/directive'  
  
在 input 中使用