VUE爬坑之---ios12系统微信中，填写完input后 键盘收起 页面底部有留白 需点击页面才可使用提交按钮

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

一、新建 JS 文件，自定义指令，代码如下

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 中使用

<input v-reset-page v-model="searchKey" type="number" placeholder="搜索作品编号">

至此，解决了vue在iOS12系统微信填写表单后，底部留白的问题，感谢 zgh0711，问题解决
https://blog.csdn.net/zgh0711/article/details/89562566