成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

H5混合開發(fā)軟鍵盤適配方案

dailybird / 2475人閱讀

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

H5混合開發(fā)軟鍵盤適配方案

現(xiàn)象：

? 當(dāng)前端界面的輸入框位于頁面底部，鍵盤喚醒時，就會遮擋輸入框。此時用戶在輸入時就不能看到已經(jīng)輸入的內(nèi)容，造成很不好的用戶體驗(yàn)。

思路分析：

? 原生鍵盤的喚醒方式大概分為兩種，一種是平鋪在頁面上，和頁面不屬于同一層級；另一種是鍵盤喚醒時將頁面向上擠壓，使其位于同一層級。這里我們采用第二種方案。當(dāng)鍵盤喚醒時，將整個webview向上擠壓，頁面向上擠壓的高度為鍵盤的高度。此時預(yù)想的結(jié)果是實(shí)現(xiàn)qq微信發(fā)送消息的效果。

實(shí)現(xiàn)方式：

android代碼：

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

在這里前端不需要做處理。本以為這個方案是最完美的?？墒前l(fā)現(xiàn)ios11.1和ios11.2不生效。這就很頭疼了。為了適配ios，不得不想新的解決思路。

改變思路：

? 綜合考慮了android和ios的版本問題，這里我們采用不同系統(tǒng)采用不同處理方式的方案。通過前端判斷設(shè)備類型，在輸入框獲取焦點(diǎn)的時候，進(jìn)行下一步處理。android采取以上的實(shí)現(xiàn)方式。ios就采取下面要說的這種方式。

ios實(shí)現(xiàn)方式：

? 根據(jù)ios的特性，我們采取前端處理的方式來實(shí)現(xiàn)。當(dāng)前端獲取到焦點(diǎn)時，將整個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)
}

下面來講一下原理：

在獲取焦點(diǎn)時，執(zhí)行以上代碼。因?yàn)殒I盤彈起有一個延遲，我們在這里寫了一個定時器，來實(shí)現(xiàn)這個過度。就能實(shí)現(xiàn)類似于qq微信的效果了。

這里需要注意的是，在失去焦點(diǎn)的時候，我們要清除這個定時器。再執(zhí)行

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

達(dá)到完美過度的效果。當(dāng)然，想實(shí)現(xiàn)順滑的效果，還是用原生寫吧。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104005.html

相關(guān)文章

  • 移動端布局與適配

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

    Clect 評論0 收藏0

  • Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

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

    gclove 評論0 收藏0

  • Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

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

    URLOS 評論0 收藏0

  • Android軟鍵盤彈出，覆蓋h5頁面輸入框問題

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

    Honwhy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<