檢測何時由Android瀏覽器的屏幕鍵盤觸發調整大小事件

Question

我有一個使用resize事件的表單，以保持布局與瀏覽器視口的大小成比例。 我遇到的問題是，當Android瀏覽器上出現屏幕鍵盤時，事件會觸發。 這會導致表單的布局發生變化，因此輸入字段會在瀏覽器關注后移動。 這使我的應用程序在Android上無法使用。 這不是IOS的問題，因為屏幕鍵盤似乎是不會觸發調整大小事件的疊加層。

有沒有辦法檢測到調整大小事件是由鍵盤外觀引發的？

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
    // Indicate normal resize

}
else {
    // We know that element who opens keyboard is in 'focus'
    // 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