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

dailybird 發布于2019-08-23 17:13 / 2435人閱讀

摘要：混合開發軟鍵盤適配方案現象當前端界面的輸入框位于頁面底部，鍵盤喚醒時，就會遮擋輸入框。當鍵盤喚醒時，將整個向上擠壓，頁面向上擠壓的高度為鍵盤的高度。本以為這個方案是最完美的。可是發現和不生效。采取以上的實現方式。

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

現象：

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

思路分析：

? 原生鍵盤的喚醒方式大概分為兩種，一種是平鋪在頁面上，和頁面不屬于同一層級；另一種是鍵盤喚醒時將頁面向上擠壓，使其位于同一層級。這里我們采用第二種方案。當鍵盤喚醒時，將整個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;

達到完美過度的效果。當然，想實現順滑的效果，還是用原生寫吧。

云服務器 GPU云服務器軟鍵盤軟鍵盤遮擋關閉軟鍵盤隱藏軟鍵盤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104005.html

移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現后高度輸入框高度保存按鈕高度，發現鍵盤彈出遮擋著后，框會自動上移到可視區內，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發過程中，我們經常遇到h5表單錄入頁面，在Android系統webview中，由于軟鍵盤彈出，導致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家系統：An...

gclove 2019-08-30 15:54 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現后高度輸入框高度保存按鈕高度，發現鍵盤彈出遮擋著后，框會自動上移到可視區內，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發過程中，我們經常遇到h5表單錄入頁面，在Android系統webview中，由于軟鍵盤彈出，導致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家系統：An...

URLOS 2019-08-02 13:56 評論0 收藏0
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

摘要：代碼調試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現后高度輸入框高度保存按鈕高度，發現鍵盤彈出遮擋著后，框會自動上移到可視區內，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題移動端開發過程中，我們經常遇到h5表單錄入頁面，在Android系統webview中，由于軟鍵盤彈出，導致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家系統：An...

Honwhy 2019-08-23 14:12 評論0 收藏0