检测何时由 Android 浏览器的屏幕键盘触发调整大小事件

Question

我的表单使用调整大小事件来保持与浏览器视口大小成比例的布局。我遇到的问题是，当屏幕键盘出现在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