資訊專欄INFORMATION COLUMN
摘要：代碼調試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內，問題定位成功。
Android軟鍵盤彈出，覆蓋h5頁面輸入框問題
移動端開發(fā)過程中，我們經常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家
系統(tǒng)：Android
條件：當輸入框在可視區(qū)底部或者偏下的位置
觸發(fā)條件：輸入框獲取焦點，彈出軟鍵盤
表現(xiàn)：軟鍵盤 覆蓋 h5頁面中的輸入框
問題分析:1.發(fā)現(xiàn)問題：當前頁面中box為flex布局，內容為上下固定高，中間自適應（中間區(qū)域內容過多會出現(xiàn)滾動條，input框在wrapper的底部），input獲取焦點，手機鍵盤彈出，input未上移到可視區(qū)內，懷疑是flex布局導致。
h5頁面 測試代碼如下：
頭部
- 內容區(qū)
- 內容區(qū)
- 內容區(qū)
- 內容區(qū)
- 內容區(qū)
2.修改布局：去除box中的flex布局，將wrapper、footer通過position:absolute的方式定位在頁面中，發(fā)現(xiàn)input依舊不上移，判定與flex布局無關，代碼修改如下：
3.真機模擬：進行真機與電腦連接調試，打開chrome的chrome://inspect，(如下圖所示)，發(fā)現(xiàn)鍵盤未彈出時html高度為512px，鍵盤彈出后html的高度為288px(減少區(qū)域的為軟鍵盤區(qū)域)，懷疑是否是因為html、body設置了height:100%的自適應布局后,高度跟隨屏幕的可用高度改變而改變導致的。??
4.代碼調試：去除body的height:100%，給body添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，body高度 = 288(軟鍵盤出現(xiàn)后html高度)+50(輸入框高度)+48(保存按鈕高度) ，發(fā)現(xiàn)鍵盤彈出遮擋著input后，input框會自動上移到可視區(qū)內，問題定位成功。
解決方案：方案1:頁面渲染完成后，通過JS動態(tài)獲取屏幕可視區(qū)高度（注：屏幕旋轉后，需重新獲取屏幕高度并賦值），并將其賦值到body的height，這樣body的高度一直都是屏幕的高度，當軟鍵盤彈出后，會將body向上推（因為body有了固定高度，不會再繼承html的自適應高度），使輸入框置到可視區(qū)內，代碼如下：
document.body.style.height = window.screen.availHeight +"px";
方案2:我們可以借助元素的 scrollIntoViewIfNeeded（） 方法，這個方法執(zhí)行后如果當前元素在可視區(qū)中不可見，則會滾動瀏覽器窗口或容器元素，最終讓它可見，如果當前元素在可視區(qū)中，這個方法什么也不做，代碼如下：
window.addEventListener("resize", () => {
if (document.activeElement.tagName == "INPUT") {
//延遲出現(xiàn)是因為有些 Android 手機鍵盤出現(xiàn)的比較慢
window.setTimeout(() => {
document.activeElement.scrollIntoViewIfNeeded();
}, 100);
}
});
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/53461.html
摘要：代碼調試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題 移動端開發(fā)過程中，我們經常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家 系統(tǒng)：An...
摘要：代碼調試去除的，給添加一個正好能讓軟鍵盤彈出后遮住輸入框的高度，高度軟鍵盤出現(xiàn)后高度輸入框高度保存按鈕高度，發(fā)現(xiàn)鍵盤彈出遮擋著后，框會自動上移到可視區(qū)內，問題定位成功。 Android軟鍵盤彈出，覆蓋h5頁面輸入框問題 移動端開發(fā)過程中，我們經常遇到h5表單錄入頁面，在Android系統(tǒng)webview中，由于軟鍵盤彈出，導致覆蓋 h5頁面輸入框問題，在此進行回顧并分享給大家 系統(tǒng)：An...
摘要：然而，并沒有直接監(jiān)聽軟鍵盤的原生事件，只能通過軟鍵盤彈起或收起，引發(fā)頁面其他方面的表現(xiàn)間接監(jiān)聽，曲線救國。軟鍵盤收起表現(xiàn)觸發(fā)輸入框以外的區(qū)域時，輸入框失去焦點，軟鍵盤收起?？梢宰屲涙I盤彈起后，讓焦點元素再次滾到可視區(qū)，強迫滾到位。 前言 最近一段時間在做 H5 聊天項目，踩過其中一大坑：輸入框獲取焦點，軟鍵盤彈起，要求輸入框吸附（或頂）在輸入法框上。需求很明確，看似很簡單，其實不然。從...
閱讀 1278·2021-11-08 13:25
閱讀 1466·2021-10-13 09:40
閱讀 2793·2021-09-28 09:35
閱讀 761·2021-09-23 11:54
閱讀 1162·2021-09-02 15:11
閱讀 2457·2019-08-30 13:18
閱讀 1693·2019-08-30 12:51
閱讀 2714·2019-08-29 18:39
