当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