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清单中会做什么。

当调整大小量在一定范围内时，我也尝试听取窗口调整大小事件并阻止它（请参阅this answer到另一个问题）。但这里发生的事情是，键盘打开后立即再次关闭。（*）

所以我的基本想法是：

阻止浏览器计算新的大小（好像没有调整大小）
将键盘设置为叠加层，而不是调整窗口大小的单个元素
在我已测试的防止调整大小方法（*）

但是我无法找到任何一种解决方案。

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

当android键盘打开时，防止文档重排/浏览器调整大小

1 个答案: