H5混合開發軟鍵盤適配方案

<center><font size = "6px">H5混合開發軟鍵盤適配方案</font></center>

現象：

​ 當前端界面的輸入框位於頁面底部，鍵盤喚醒時，就會遮擋輸入框。此時用戶在輸入時就不能看到已經輸入的內容，形成很很差的用戶體驗。

思路分析：

​ 原生鍵盤的喚醒方式大概分爲兩種，一種是平鋪在頁面上，和頁面不屬於同一層級；另外一種是鍵盤喚醒時將頁面向上擠壓，使其位於同一層級。這裏咱們採用第二種方案。當鍵盤喚醒時，將整個webview向上擠壓，頁面向上擠壓的高度爲鍵盤的高度。此時預想的結果是實現qq微信發送消息的效果。

實現方式：

android代碼：

cordova.getActivity().runOnUiThread(new Runnable() {
    @Override
    public void run() {
        cordova.getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
        callbackContext.success();
    }
});

在這裏前端不須要作處理。本覺得這個方案是最完美的。但是發現ios11.1和ios11.2不生效。這就很頭疼了。爲了適配ios，不得不想新的解決思路。

改變思路：

​ 綜合考慮了android和ios的版本問題，這裏咱們採用不一樣系統採用不一樣處理方式的方案。經過前端判斷設備類型，在輸入框獲取焦點的時候，進行下一步處理。android採起以上的實現方式。ios就採起下面要說的這種方式。

ios實現方式：

​ 根據ios的特性，咱們採起前端處理的方式來實現。當前端獲取到焦點時，將整個body向上推。類型於第一種方式，只不過是前端來處理。

前端代碼：

var scrollTime;
var timerId;
if(typeof (device)!="undefined"&&device.platform=='iOS'){
    let num = 0;
    scrollTime = setInterval(function(){
       timerId = true;
       if (num < 9) {
       num++;
     } else {
       clearInterval(scrollTime);
       timerId = null;
       document.body.scrollTop = document.body.scrollHeight;
       return;
     }
      document.body.scrollTop = document.body.scrollHeight;
    },100)
}

下面來說一下原理：

在獲取焦點時，執行以上代碼。由於鍵盤彈起有一個延遲，咱們在這裏寫了一個定時器，來實現這個過分。就能實現相似於qq微信的效果了。

這裏須要注意的是，在失去焦點的時候，咱們要清除這個定時器。再執行

document.body.scrollTop = document.body.scrollHeight;

達到完美過分的效果。固然，想實現順滑的效果，仍是用原生寫吧。