ios 鍵盤收起後彈出層焦點錯位

ios 鍵盤收起後彈出層焦點錯位

問題描述

輸入框獲取焦點的時候，鍵盤彈出，會將內容總體上移，這時彈出model的話，就會出現點擊不上按鈕的現象。

原理解析

• 輸入框均未獲取焦點的時候（鍵盤未彈出），顯示以下圖： test.png

  

• 有輸入框獲取焦點的時候（鍵盤彈出），顯示以下圖： test2.png

  

  此時，頁面內容總體上移。

• 總體內容上移時若是須要操做和頁面座標相關的操做時，如點擊model中的按鈕，就會出現錯位的現象，以下如所示： test3.png

  

  此時，上部的按鈕纔是真正點擊按鈕的位置所在。

解決辦法

出現錯位是由於內容上移而沒有復原，若是手動將其復原的話，就不會出現錯位的問題了。

部分參考代碼

• 在input focus事件觸發的時候

export default class Input {

  // 這裏isKeyShow和scrollY設置成static是由於每一個input都是一個實例，而這兩個狀態屬性只須要一個便可

  //鍵盤是否處於顯示狀態
  private static isKeyShow: boolean = false;

  //記錄鍵盤彈出時頁面滾動的位置
  private static scrollY: number = 0;

  //focus事件觸發
  public focusHandle(e: object) {
    //若是鍵盤未彈出，須要記錄此時頁面滾動的位置
    if(!Input.isKeyShow){
      Input.scrollY = window.scrollY;
    }
    Input.isKeyShow = true;
  }

  //輸入框失去焦點事件
  public blurHandle(e: object) {
    // 判斷設備是不是ios，而且若是是ios的話，即執行
    // 這裏判斷設備系統的代碼就不展現了
    if(judgeClient()==='ios'){
      // 設置鍵盤狀態爲不顯示
      Input.isKeyShow = false;

      // 這裏使用異步是由於若是其餘的輸入框獲取到焦點的話，則能夠在異步執行以前改變掉isKeyShow的值，而不至於在輸入中就將頁面滾動回去了
      setTimeout(() => {
        // 若是鍵盤此時是彈出狀態的話，則不執行
        if(Input.isKeyShow)return
        // 若是鍵盤不是彈出狀態的話，則將頁面滾動到鍵盤彈出以前的位置
        window.scroll(0, Input.scrollY);
        Input.isKeyShow = true;
      }, 0);
    }
  }
}
複製代碼