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

資訊專(zhuān)欄INFORMATION COLUMN

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

gclove / 3463人閱讀

摘要：代碼調(diào)試去除的，給添加一個(gè)正好能讓軟鍵盤(pán)彈出后遮住輸入框的高度，高度軟鍵盤(pán)出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤(pán)彈出遮擋著后，框會(huì)自動(dòng)上移到可視區(qū)內(nèi)，問(wèn)題定位成功。

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

移動(dòng)端開(kāi)發(fā)過(guò)程中，我們經(jīng)常遇到h5表單錄入頁(yè)面，在A(yíng)ndroid系統(tǒng)webview中，由于軟鍵盤(pán)彈出，導(dǎo)致覆蓋 h5頁(yè)面輸入框問(wèn)題，在此進(jìn)行回顧并分享給大家

系統(tǒng)：Android

條件：當(dāng)輸入框在可視區(qū)底部或者偏下的位置

觸發(fā)條件：輸入框獲取焦點(diǎn)，彈出軟鍵盤(pán)

表現(xiàn)：軟鍵盤(pán) 覆蓋 h5頁(yè)面中的輸入框

問(wèn)題分析:

1.發(fā)現(xiàn)問(wèn)題：當(dāng)前頁(yè)面中box為flex布局，內(nèi)容為上下固定高，中間自適應(yīng)（中間區(qū)域內(nèi)容過(guò)多會(huì)出現(xiàn)滾動(dòng)條，input框在wrapper的底部），input獲取焦點(diǎn)，手機(jī)鍵盤(pán)彈出，input未上移到可視區(qū)內(nèi)，懷疑是flex布局導(dǎo)致。

h5頁(yè)面 測(cè)試代碼如下：

    
    
      
      
        
    
    
        

            
頭部

            

                
    
                  
  • 內(nèi)容區(qū)
    • 
                  
  • 內(nèi)容區(qū)
    • 
                  
  • 內(nèi)容區(qū)
    • 
                  
  • 內(nèi)容區(qū)
    • 
                  
  • 內(nèi)容區(qū)
    •

2.修改布局：去除box中的flex布局，將wrapper、footer通過(guò)position:absolute的方式定位在頁(yè)面中，發(fā)現(xiàn)input依舊不上移，判定與flex布局無(wú)關(guān)，代碼修改如下：

3.真機(jī)模擬：進(jìn)行真機(jī)與電腦連接調(diào)試，打開(kāi)chrome的chrome://inspect，(如下圖所示)，發(fā)現(xiàn)鍵盤(pán)未彈出時(shí)html高度為512px，鍵盤(pán)彈出后html的高度為288px(減少區(qū)域的為軟鍵盤(pán)區(qū)域)，懷疑是否是因?yàn)閔tml、body設(shè)置了height:100%的自適應(yīng)布局后,高度跟隨屏幕的可用高度改變而改變導(dǎo)致的。??

4.代碼調(diào)試：去除body的height:100%，給body添加一個(gè)正好能讓軟鍵盤(pán)彈出后遮住輸入框的高度，body高度 = 288(軟鍵盤(pán)出現(xiàn)后html高度)+50(輸入框高度)+48(保存按鈕高度) ，發(fā)現(xiàn)鍵盤(pán)彈出遮擋著input后，input框會(huì)自動(dòng)上移到可視區(qū)內(nèi)，問(wèn)題定位成功。

解決方案：

方案1:頁(yè)面渲染完成后，通過(guò)JS動(dòng)態(tài)獲取屏幕可視區(qū)高度（注：屏幕旋轉(zhuǎn)后，需重新獲取屏幕高度并賦值），并將其賦值到body的height，這樣body的高度一直都是屏幕的高度，當(dāng)軟鍵盤(pán)彈出后，會(huì)將body向上推（因?yàn)閎ody有了固定高度，不會(huì)再繼承html的自適應(yīng)高度），使輸入框置到可視區(qū)內(nèi)，代碼如下：

document.body.style.height = window.screen.availHeight +"px";

方案2:我們可以借助元素的 scrollIntoViewIfNeeded（） 方法，這個(gè)方法執(zhí)行后如果當(dāng)前元素在可視區(qū)中不可見(jiàn)，則會(huì)滾動(dòng)瀏覽器窗口或容器元素，最終讓它可見(jiàn)，如果當(dāng)前元素在可視區(qū)中，這個(gè)方法什么也不做，代碼如下：

    window.addEventListener("resize", () => {
    if (document.activeElement.tagName == "INPUT") {         
        //延遲出現(xiàn)是因?yàn)橛行?Android 手機(jī)鍵盤(pán)出現(xiàn)的比較慢
         window.setTimeout(() => {             
            document.activeElement.scrollIntoViewIfNeeded();
         }, 100);
     }
});

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

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

相關(guān)文章

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

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

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

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

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

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

  • 可能這些是你想要的H5軟鍵盤(pán)兼容方案

    摘要：然而，并沒(méi)有直接監(jiān)聽(tīng)軟鍵盤(pán)的原生事件，只能通過(guò)軟鍵盤(pán)彈起或收起，引發(fā)頁(yè)面其他方面的表現(xiàn)間接監(jiān)聽(tīng)，曲線(xiàn)救國(guó)。軟鍵盤(pán)收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時(shí)，輸入框失去焦點(diǎn)，軟鍵盤(pán)收起?？梢宰屲涙I盤(pán)彈起后，讓焦點(diǎn)元素再次滾到可視區(qū)，強(qiáng)迫滾到位。 前言 最近一段時(shí)間在做 H5 聊天項(xiàng)目，踩過(guò)其中一大坑：輸入框獲取焦點(diǎn)，軟鍵盤(pán)彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡(jiǎn)單，其實(shí)不然。從...

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

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

0條評(píng)論

閱讀需要支付1元查看
<