h5軟鍵盤擋住輸入框問題解決（android）

問題

移動端瀏覽器中的表單在部分android機型上測試，點擊靠下的輸入框時會遇到彈出的軟鍵盤擋住輸入框問題
ios可自身彈起（ios自身的調整偶爾也會出問題，例如第三方鍵盤會遮擋，緣由是第三方輸入法的tool bar或者鍵盤也被當作可視區域，這裏不作討論）

問題分析及解決辦法確立

最多見的是使用兩個方法：scrollIntoViewIfNeeded()、scrollIntoView()，使用方法自行百度。在我這裏無效。

經測試發現android彈出鍵盤時有兩種效果：

1.將activity擠壓，鍵盤也佔一部分activity空間；

2.鍵盤彈出在瀏覽器上面覆蓋一層，不影響瀏覽器大小。

第二種會出現遮擋問題

因而想到如下兩種方案：

1.經過動態增長頁面高度和設置scrollTop來使輸入框到達合適的位置

2.設置相對定位，經過top來使輸入框到達合適的位置

影響實現的兩個點：

1.js拿不到鍵盤的彈出和收起事件;

2.覆蓋一層的鍵盤彈出方式不會觸發window.resize事件和onscroll事件。

解決

第一種經試驗有些問題影響了實現，這裏只討論第二種。

直接上代碼，這裏是react項目（css設置absolute配合js改變top實現效果，transition過渡加強用戶體驗，這裏就不放了）

getElementOffsetTop(el) {
    let top = el.offsetTop
    let cur = el.offsetParent
    while(cur != null){
          top += cur.offsetTop
          cur = cur.offsetParent
   }
   return top
  }

  componentDidMount() {
    const u = navigator.userAgent
    const isAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1;//android終端
    // alert('android'+isAndroid)
    if(isAndroid){ // android統一處理，不影響ios的自身處理
      const body = document.getElementsByTagName('body')[0] // 兼容獲取body

      const regDom = document.querySelector('.wrapper_register') // 獲取頁面根元素
      const content = document.querySelector('.content') // 表單內容部分

      // const scrollHeight = body.scrollHeight // 網頁文檔高
      // const scrollTop = body.scrollTop// 捲上去的高

      const clientHeight = body.clientHeight //可見高
      const fixHeight = clientHeight/3 // 定位高，彈出鍵盤時input距瀏覽器上部的距離，本身定義合適的

      // 符合需彈出鍵盤的元素query
      const queryStr = 'input[type="text"], input[type="tel"], input[type="password"], textarea'
      const inputs = content.querySelectorAll(queryStr)

      // console.log(inputs)

      const offsetTopArr = Array.prototype.map.call(inputs,item=>{
        return this.getElementOffsetTop(item) // offsetTop只能獲取到頂部距它的offsetParent的距離，需此方法獲取到元素距頂部的距離
      })

      inputs.forEach((item, i)=>{
        item.addEventListener('focus',()=>{
          // 改變top上移頁面
          regDom.style.top = '-' + (offsetTopArr[i] - fixHeight) + 'px'
        })

        item.addEventListener('blur',()=>{
          // 恢復top
          regDom.style.top = 0
        })
      })
    }
  }

效果基本實現，這裏還有兩個問題：

第一，若是下面的提交按鈕是fixed，有些手機鍵盤彈出時會把按鈕頂上來，若是上述代碼中fixHeight設置不合適，會致使這個按鈕遮擋輸入框。因此爲了統一效果，將底部按鈕取消fixed，隨頁面滾動。

第二，若是點擊鍵盤上的收起鍵盤按鈕，會致使頁面top沒法恢復，由於沒有觸發輸入框失焦方法，需點擊空白處恢復。（目前沒找到解決辦法）

後續

1.因爲android彈出鍵盤存在必定延遲，因此能夠給top更改添加setTimeout，設置合適的延遲時間。

2.兩個h5框架，iScroll、Native.js（雖然在這個問題上沒啥用）

3.最終奧義：修改設計稿，三招 -> 使輸入框不在頁面的下半部分、採用分頁設計、彈出輸入層（ps：要和產品和設計溝通，客戶不必定會讓步 0.0）

但願你們斧正，交流更好地解決方案，謝謝