亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

dailybird / 2524人閱讀

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

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

現(xiàn)象：

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

思路分析：

? 原生鍵盤的喚醒方式大概分為兩種，一種是平鋪在頁(yè)面上，和頁(yè)面不屬于同一層級(jí)；另一種是鍵盤喚醒時(shí)將頁(yè)面向上擠壓，使其位于同一層級(jí)。這里我們采用第二種方案。當(dāng)鍵盤喚醒時(shí)，將整個(gè)webview向上擠壓，頁(yè)面向上擠壓的高度為鍵盤的高度。此時(shí)預(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();
    }
});

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

改變思路：

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

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

? 根據(jù)ios的特性，我們采取前端處理的方式來(lái)實(shí)現(xiàn)。當(dāng)前端獲取到焦點(diǎn)時(shí)，將整個(gè)body向上推。類型于第一種方式，只不過(guò)是前端來(lái)處理。

前端代碼：

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)
}

下面來(lái)講一下原理：

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104005.html

相關(guān)文章

  • 移動(dòng)端布局與適配

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

    Clect 評(píng)論0 收藏0

  • Android軟鍵盤彈出，覆蓋h5頁(yè)面輸入框問(wèn)題

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

    gclove 評(píng)論0 收藏0

  • Android軟鍵盤彈出，覆蓋h5頁(yè)面輸入框問(wèn)題

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

    URLOS 評(píng)論0 收藏0

  • Android軟鍵盤彈出，覆蓋h5頁(yè)面輸入框問(wèn)題

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

    Honwhy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<