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>