ios移動端軟鍵盤收起後input輸入框焦點錯位或無法輸入解決

本文爲開發中遇到的問題解決方案總結：ios移動端軟鍵盤收起後input輸入框焦點錯位或無法輸入解決

問題描述：

頁面背後是可滾動的列表，前面是彈出框，裏面有需要輸入值的input框。當打開鍵盤後，彈出框跟後面的列表都會被頂上去一段距離，當再關閉鍵盤就可能出現：前面的彈出框回到了原來的位置，而後面的列表依然是頂上去的位置。這時後再去點擊彈出框的輸入框或者按鈕的時候發現焦點依然停留在鍵盤彈出後頂上去的位置，造成了彈出層焦點錯位。
只有手動滑動後面的列表到原來位置後，彈出層的焦點纔會恢復。

解決方案：

1：

let isReset = true;
const u = navigator.userAgent;
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isiOS) {//ios
    document.body.addEventListener('focusin', () => {
      //軟鍵盤彈出的事件處理
      isReset = false;
    });
    document.body.addEventListener('focusout', () => {
      //軟鍵盤收起的事件處理
      isReset = true;
      setTimeout(() => {
      	//當焦點在彈出層的輸入框之間切換時先不歸位
        if (isReset) {
          window.scroll(0, 0);//失焦後強制讓頁面歸位
        }
      }, 300);
    });
  } else if (isAndroid) {//android
    window.onresize = function () {
      //鍵盤彈起與隱藏都會引起窗口的高度發生變化
      let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if (resizeHeight < h) {
        //當軟鍵盤彈起，在此處操作
        isReset = false;
      } else {
        //當軟鍵盤收起，在此處操作
        isReset = true;
        setTimeout(() => {
          if (isReset) {
            window.scroll(0, 0);//失焦後強制讓頁面歸位
          }
        }, 300);
      }
    }
  }

如果使用的react框架，可直接複製上述代碼到componentDidMount（）中
參考>文章內容參考 https://blog.csdn.net/qq_23179075/article/details/86497498

2:
輸入框所在的元素用了position:fixed，安卓端一切正常，ios系統在input失焦後鍵盤縮回去了但是頁面不歸位。可能原因：鍵盤事件觸發，導致position:fixed失效。

$("input").on("blur",function(){
	window.scroll(0,0);//失焦後強制讓頁面歸位
});

3:
H5微信頁面開發，軟鍵盤彈起後，若原輸入框被遮擋，頁面整體將會上移，然而當輸入框失焦，軟鍵盤收起後，頁面未恢復，導致彈框裏的按鈕響應區域錯位。

解決方案：給輸入框（或select選擇框）添加失去焦點的事件，當輸入框失去焦點，頁面自動滾動到頂部，並且需要加定時器，否則偶爾會失效

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

PS：

window.scroll()方法已廢棄，該方法已經使用了 scrollTo() 方法來替代。建議使用window.scrollTo()
scrollTo(xpos,ypos)，可把內容滾動到指定的座標。
微信中遇到的坑：https://gitee.com/linguanhua/codes/jyeoqxtvmwcir7pzsak9l98