当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