h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题

项目中遇到了这个问题，说实话 iOS 端问题挺多的，原因找起来比较简单，就是吊起键盘的时候把window的高度挤小了，然后，

关掉键盘页面高度没恢复，安卓手机会自动恢复页面高度。

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

页面显示出问题了当然得解决，就在google里翻，也是找到解决方法了，如下链接

 

微信6.7.4 ios12软键盘顶起页面后隐藏不回弹解决方案

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

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

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

1. 非框架搭建的页面

const windowHeight = window.innerHeight
input.addEventListener('blur', function () {
    let windowFocusHeight = window.innerHeight
    if (windowHeight == windowFocusHeight) {
      return
    }
    console.log(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); //页面向下滚动
 })

　　

2. 因为经常用 vue 所以就写了全局指令，在输入框上加下就可以了，指令代码如下

const windowHeight = window.innerHeight
Vue.directive('fixedInput', function (el, binding) {
  el.addEventListener('blur', function () {
    let windowFocusHeight = window.innerHeight
    if (windowHeight == windowFocusHeight) {
      return
    }
    console.log(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); //页面向下滚动
  })
})

　　

3. Vue 在全局添加

先写一个mixin,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); //页面向下滚动
    },
  }
}

 

在 App.vue 中引用

<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
  import fixedInput from '@/mixins/fixedInput'
  export default {
    name: 'app',
    mixins: [fixedInput],
    updated() {
      // 解决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;
      });
    },
  }
</script>