安卓键盘打开时防止文档重排/浏览器调整大小 [英] Prevent document reflow/browser resize when android keyboard opens

问题描述

这是用于HTML5/Javascript WebApp，而不是本地android应用.

This is for a HTML5/Javascript WebApp, not a native android app.

当Android软键盘打开时，如何防止浏览器/DOM调整内容的大小(它是自适应的，对于大小等，大多为vw/vh)? 发生的是，一旦打开键盘(例如，在输入字段上)，内容(尤其是字体大小)就会改变.

How do I prevent the browser/the DOM from resizing my content (which is responsive, mostly vw/vh for sizes etc), when the android soft keyboard opens? What happens is, the content, especially font sizes, changes once the keyboard is opened (on input fields for example).

我已经设置了

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

我想要实现的是，键盘充当覆盖层，并且下面的内容可滚动.因此，基本上，android:windowSoftInputMode在Android清单中将执行什么操作.

What I want to achieve is, that the keyboard acts as an overlay and the content underneath becomes scrollable. So basically, what android:windowSoftInputMode would do in an android manifest.

当调整大小量在一定范围内时，我还尝试监听窗口调整大小事件并阻止它(请参阅此答案转到另一个问题).但是这里发生的是键盘打开，然后立即关闭. (*)

I also tried listening to the window resize event and prevent it, when the resize amount is in a certain range (see this answer to another question). But what happens here, is the keyboard opens and immediatly after closes again. (*)

所以我的基本想法是:

• 防止浏览器计算新的大小(就像没有调整大小一样)
• 将键盘设置为叠加层，而不是调整窗口大小的单个元素
• 使用我已经测试过的阻止调整大小方法(*)保持键盘打开

但是我无法为这些解决方案找到一个可行的解决方案.

But I can't figure out a working solution for any of these.

推荐答案

好，这是针对html5(浏览器)应用的修复.

Ok , this is fix for html5 (browser) app .

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;
}

最初尝试通过设置标志来阻止:

Initially try to prevent by setting the flag :

var object_ = document.getElementById("IwillOpenKeyboardOnMobile");
object_.addEventListener("focus", ONFOCUSELEMENT);

function ONFOCUSELEMENT() {
    isKeyboardOpen = true; 
}

// opposite event is blur

这篇关于安卓键盘打开时防止文档重排/浏览器调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！