IOS输入框，页面被顶上去不回弹

做项目的时候，手动点击输入框，页面被顶上去不会回弹，该情况出现在ios中很频繁，据我之前的解决办法是这样的：

解决办法一

在页面中对输入框添加监听事件，失去焦点之后就对其触发一个回弹事件。

        Vue.prototype.wInputBlur = function() {
            let currentPosition = ''
            let timer = ''
            let speed = 1 // 页面滚动距离
            setTimeout(function () {
                currentPosition = document.documentElement.scrollTop || document.body.scrollTop
                currentPosition -= speed
                window.scrollTo(0, currentPosition) // 页面向上滚动
                currentPosition += speed // speed变量
                window.scrollTo(0, currentPosition) // 页面向下滚动
            }, 100)
        },

        // 在mounted生命周期中调用，专门在不会新增输入框的页面使用
        Vue.prototype.inputBlur = function(){
            for (var i = 0; i < document.getElementsByTagName('input').length; i++) {
                document.getElementsByTagName('input')[i].addEventListener('blur', this.wInputBlur)
            }

            for (var i = 0; i < document.getElementsByTagName('textarea').length; i++) {
                document.getElementsByTagName('textarea')[i].addEventListener('blur', this.wInputBlur)
            }
        },

解决办法二

但是这个办法解决好像不够彻底，于是查询网上的一些大哥们的解决办法。
通过在入口函数app.vue中的update中添加对输入框的监听。

第一步：引入代码

import fixedInput from "@/assets/js/fixedInput.js";

第二步：引入代码

	mixins: [fixedInput],
    beforeDestroy() {},
    destroyed() {
        localStorage.clear("token");
    },
    mounted() {},
    methods: {},
    updated() {
        document.querySelectorAll("input").forEach(item => {
            item.onblur = this.temporaryRepair;
            window.scrollTo(0, 0);
        });
        document.querySelectorAll("select").forEach(item => {
            item.onblur = this.temporaryRepair;
            window.scrollTo(0, 0);
        });
        document.querySelectorAll("textarea").forEach(item => {
            item.onblur = this.temporaryRepair;
            window.scrollTo(0, 0);
        });
    }

fixedInput.js代码

export default {
    data() {
      return {
        windowHeight: 0
      }
    },
    mounted() {
      this.windowHeight = window.innerHeight
    },
    methods: {
      temporaryRepair() {
        let that = this
        let windowFocusHeight = window.innerHeight
        if (that.windowHeight == windowFocusHeight) {
          return
        }
        console.log(that.windowHeight + '--' + windowFocusHeight);
        console.log('修复');
        let currentPosition;
        let speed = 1; //页面滚动距离
        currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
        currentPosition -= speed;
        window.scrollTo(0, currentPosition); //页面向上滚动
        currentPosition += speed; //speed变量
        window.scrollTo(0, currentPosition); //页面向下滚动
      },
    }
  }

如此之后便能完美解决，页面无法回弹的问题。

总结：其实原理都是一样的，通过监听页面的input的输入框的失焦事件，来触发某个函数，通过判断窗口文档的显示高度是否和屏幕高度一致，否则触发事件