修复vue项目在iPhone输入框失去焦点底部留白问题

缘起

项目中遇到了这个问题，说实话 iOS 端问题挺多的，原因找起来比较简单，就是换起键盘的时候把window的高度挤小了，然后，关掉键盘页面高度没恢复，安卓手机会自动恢复页面高度。

原因找到了就想解决办法，刚开始想的是 iOS 它不恢复那我也没办法，这属于 iOS 的bug啊或者微信的 bug 啊，但领导不这么想，

页面显示出问题了当然得解决，就在google里翻，也是找到解决方法了，如下链接： ios软键盘顶起页面后隐藏不回弹解决方案

性空

解决方法很简单，让window滚动下就可以恢复window的高度了。

在输入框失去焦点后（关闭键盘）让页面滚一下（select 标签导致页面底部留白此方法行不通，当用户未改变select 选中

的项就关闭选择框不能触发 change 事件，当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur）, 解决方案如下：

一，新建全局的 混入 js 插件: fixedInput.js

export default {
    // 修复 ios 微信 input 失去焦点 留白的问题
    data () {
        return {
            windowHeight: 0,
        };
    },
    mounted() {
        this.windowHeight = window.innerHeight;
    },
    updated() {
        this.repairBlur();
    },
    methods: {
        repairBlur() {
            let ua = navigator.userAgent;
            //判断是否是ios设备
            if (/(iPhone|iPad|iPod|iOS)/i.test(ua)) {
                // 解决ios输入框弹出的页面样式问题
                document.querySelectorAll("input").forEach(item => {
                    item.onblur = this.temporaryRepair;
                });
                document.querySelectorAll("select").forEach(item => {
                    item.onchange = this.temporaryRepair;
                });
                document.querySelectorAll("textarea").forEach(item => {
                    item.onblur = this.temporaryRepair;
                });
            }
        },
        temporaryRepair() {
            let windowFocusHeight = window.innerHeight
            if (this.windowHeight == windowFocusHeight) {
                return;
            }
            console.log(this.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); //页面向下滚动
        },
    }
}

第二， 在main.js 或者 在 有bug 的组件内引入即可 （本人采用全局混入方式）：

全局混入方式：

// mixin  全局混入方法
import mixin from "./assets/js/fixedInput.js";
Vue.mixin(mixin);

有bug页面引入方式

import fixedInput from '@/assets/js/fixedInput';
export default {
    ……
    mixins: [fixedInput],
    ……
}

参考资料

• ios软键盘顶起页面后隐藏不回弹解决方案
• h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
• 【解决】ios 12.3.1 微信H5页面文本框失去焦点后输入法收回空白( vue )