检测Android浏览器的屏幕键盘何时触发resize事件答案

【问题标题】：Detect when resize event is triggered by the Android browser's on screen keyboard检测Android浏览器的屏幕键盘何时触发resize事件
【发布时间】：2014-03-11 23:00:02
【问题描述】：

我有一个表单，它使用 resize 事件来保持布局与浏览器视口的大小成比例。我遇到的问题是当屏幕键盘出现在 Android 浏览器上时事件会触发。这会导致表单的布局发生变化，因此输入字段会在浏览器关注它之后移动。这使我的应用程序无法在 Android 上使用。这不是 IOS 的问题，因为屏幕键盘似乎是不会触发调整大小事件的覆盖。

有没有办法检测到键盘的出现引发了调整大小事件？

【问题讨论】：

也许这个链接会对你有所帮助：stackoverflow.com/questions/17195278/…>

标签： javascript android

【解决方案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

【讨论】：