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

 

 1 export default {
 2   data() {
 3     return {
 4       windowHeight: 0
 5     }
 6   },
 7   mounted() {
 8     this.windowHeight = window.innerHeight
 9   },
10   methods: {
11     temporaryRepair() {
12       let that = this
13       let windowFocusHeight = window.innerHeight
14       if (that.windowHeight == windowFocusHeight) {
15         return
16       }
17       console.log(that.windowHeight + '--' + windowFocusHeight);
18       console.log('修復');
19       let currentPosition;
20       let speed = 1; //頁面滾動距離
21       currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
22       currentPosition -= speed;
23       window.scrollTo(0, currentPosition); //頁面向上滾動
24       currentPosition += speed; //speed變量
25       window.scrollTo(0, currentPosition); //頁面向下滾動
26     },
27   }
28 }

 

在 App.vue 中引用

 1 <template>
 2   <div id="app">
 3     <router-view />
 4   </div>
 5 </template>
 6 <script>
 7   import fixedInput from '@/mixins/fixedInput'
 8   export default {
 9     name: 'app',
10     mixins: [fixedInput],
11     updated() {
12       // 解決ios輸入框彈出的頁面樣式問題
13       document.querySelectorAll("input").forEach(item => {
14         item.onblur = this.temporaryRepair;
15       });
16       document.querySelectorAll("select").forEach(item => {
17         item.onchange = this.temporaryRepair;
18       });
19       document.querySelectorAll("textarea").forEach(item => {
20         item.onblur = this.temporaryRepair;
21       });
22     },
23   }
24 </script>