當android鍵盤打開時，防止文檔重排/瀏覽器調整大小

Question

這是針對HTML5 / Javascript WebApp，而不是原生Android應用程序。

當android軟鍵盤打開時，如何防止瀏覽器/ DOM調整我的內容大小（響應速度，大多數是大小等vw / vh）？ 發生的事情是，打開鍵盤后，內容（尤其是字體大小）會發生變化（例如，在輸入字段上）。

我已經准備好了

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

我想要實現的是，鍵盤充當疊加層，下面的內容變得可滾動。 所以基本上， android:windowSoftInputMode會在android清單中做什么。

當調整大小量在一定范圍內時，我也嘗試聽窗口調整大小事件並阻止它（參見另一個問題的答案 ）。 但這里發生的事情是，鍵盤打開后立即再次關閉。 （*）

所以我的基本想法是：

• 阻止瀏覽器計算新的大小（好像沒有調整大小）
• 將鍵盤設置為疊加層，而不是調整窗口大小的單個元素
• 在我已測試的防止調整大小方法中保持鍵盤打開（*）

但我無法找到任何這些的工作解決方案。

Answer 1

好的，這是對html5（瀏覽器）應用程序的修復。

var isKeyboardOpen = false;

// Override onresize event if you have it already just insert code 
// also you can check id of element or any other parameters
if (document.activeElement.tagName == "INPUT" ||
    document.activeElement.tagName == "input") {

    // regular onresize
}
else {
    // avoid resize
}

// To check is it keyboard open use this code 

window.addEventListener('native.showkeyboard', keyboardShowHandler);

window.addEventListener('native.hidekeyboard', keyboardHideHandler);

function keyboardShowHandler(e){
    isKeyboardOpen = true; //always know status
}

function keyboardHideHandler(e){
    isKeyboardOpen = false;
}

最初嘗試通過設置標志來防止：

var object_ = document.getElementById("IwillOpenKeyboardOnMobile");
object_.addEventListener("focus", ONFOCUSELEMENT);

function ONFOCUSELEMENT() {
    isKeyboardOpen = true; 
}

// opposite event is blur