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

Honwhy 發布于2019-08-23 14:12 / 1505人閱讀

摘要：代碼調試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現后高度輸入框高度保存按鈕高度，發現鍵盤彈出遮擋著后，框會自動上移到可視區內，問題定位成功。

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

移動端開發過程中，我們經常遇到h5表單錄入頁面，在Android系統webview中，由于軟鍵盤彈出，導致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家

系統：Android

條件：當輸入框在可視區底部或者偏下的位置

觸發條件：輸入框獲取焦點，彈出軟鍵盤

表現：軟鍵盤覆蓋 h5頁面中的輸入框

問題分析:

1.發現問題：當前頁面中box為flex布局，內容為上下固定高，中間自適應（中間區域內容過多會出現滾動條，input框在wrapper的底部），input獲取焦點，手機鍵盤彈出，input未上移到可視區內，懷疑是flex布局導致。

h5頁面測試代碼如下：

2.修改布局：去除box中的flex布局，將wrapper、footer通過position:absolute的方式定位在頁面中，發現input依舊不上移，判定與flex布局無關，代碼修改如下：

3.真機模擬：進行真機與電腦連接調試，打開chrome的chrome://inspect，(如下圖所示)，發現鍵盤未彈出時html高度為512px，鍵盤彈出后html的高度為288px(減少區域的為軟鍵盤區域)，懷疑是否是因為html、body設置了height:100%的自適應布局后,高度跟隨屏幕的可用高度改變而改變導致的。??

4.代碼調試：去除body的height:100%，給body添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，body高度 = 288(軟鍵盤出現后html高度)+50(輸入框高度)+48(保存按鈕高度) ，發現鍵盤彈出遮擋著input后，input框會自動上移到可視區內，問題定位成功。

解決方案：

方案1:頁面渲染完成后，通過JS動態獲取屏幕可視區高度（注：屏幕旋轉后，需重新獲取屏幕高度并賦值），并將其賦值到body的height，這樣body的高度一直都是屏幕的高度，當軟鍵盤彈出后，會將body向上推（因為body有了固定高度，不會再繼承html的自適應高度），使輸入框置到可視區內，代碼如下：

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

方案2:我們可以借助元素的 scrollIntoViewIfNeeded（）方法，這個方法執行后如果當前元素在可視區中不可見，則會滾動瀏覽器窗口或容器元素，最終讓它可見，如果當前元素在可視區中，這個方法什么也不做，代碼如下：

    window.addEventListener("resize", () => {
    if (document.activeElement.tagName == "INPUT") {         
        //延遲出現是因為有些 Android 手機鍵盤出現的比較慢
         window.setTimeout(() => {             
            document.activeElement.scrollIntoViewIfNeeded();
         }, 100);
     }
});

GPU云服務器云服務器輸入界面軟鍵盤 android軟鍵盤 android實現軟鍵盤 qt軟鍵盤android

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

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

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
可能這些是你想要的H5軟鍵盤兼容方案

摘要：然而，并沒有直接監聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發頁面其他方面的表現間接監聽，曲線救國。軟鍵盤收起表現觸發輸入框以外的區域時，輸入框失去焦點，軟鍵盤收起。可以讓軟鍵盤彈起后，讓焦點元素再次滾到可視區，強迫滾到位。前言最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...

stackvoid 2019-08-23 17:05 評論0 收藏0