ios兼容 input輸入時彈出鍵盤框 頁面整體上移鍵盤框消失后在ios上頁面不能回彈的問題

（一）前端h5混合開發手機端ios  當有input輸入時，手機下方彈出鍵盤使頁面上移，當輸入完成，鍵盤消失后頁面顯示回到原位，但實際不能點擊（可點擊上方區域，有反應），也就是說實際是沒有回彈。

解決辦法：

給input加blur事件，代碼如下：

$('input').on('blur', function () {
          setTimeout(function(){
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
          }, 100);
});

（二）ios鍵盤喚起，鍵盤收起以后頁面不歸位 （vue中）

問題詳情描述：

 輸入內容，軟鍵盤彈出，頁面內容整體上移，但是鍵盤收起，頁面內容不下滑

出現原因分析：

固定定位的元素 在元素內 input 框聚焦的時候 彈出的軟鍵盤占位 失去焦點的時候軟鍵盤消失 但是還是占位的 導致input框不能再次輸入 在失去焦點的時候給一個事件

解決辦法：

<div class="list">
  <div class="title"><span>啦啦啦</span></div>
   <div class="content">
     <input class="contentInput" 
            placeholder="你叫啥"
            v-model="peopleList.name"
           @focus="changefocus()"
           @blur.prevent="changeBlur()"/>    </div>
 </div>

 

changeBlur(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
      }
    }

拓展知識： position: fixed的元素在ios里，收起鍵盤的時候會被頂上去，特別是第三方鍵盤

（三）一般出現在IOS設備中的微信內部瀏覽器，出現的條件為：

• 頁面高度過小
• 聚焦時，頁面需要往上移動的時候

所以一般input在頁面上方或者頂部都不會出現無法回彈🤣

解決辦法為，在聚焦時，獲取當前滾動條高度，然后失焦時，賦值之前獲取的高度：

<template>
  <input type="text" @focus="focus" @blur="blur">
</template>

<script>
  export default {
    data() {
      return {
        scrollTop: 0
      }
    },
    
    methods: {
      focus() {
        this.scrollTop = document.scrollingElement.scrollTop;
      },
      
      blur() {
        document.scrollingElement.scrollTo(0, this.scrollTop);
      }
    }
  }
</script>

轉載自掘金，鏈接：https://juejin.im/post/5d6e1899e51d453b1e478b29

就OK啦！