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

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).

I already have set

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

What I want to achieve is, that the keyboard acts as an overlay and the content underneath bees 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. (*)

So my basic ideas are:

• prevent the browser from calculating the new sizes (as if no resize happened)
• set the keyboard to act as an overlay, not an individual element resizing the window
• keep the keyboard open in my already tested prevent-resize method (*)

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

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

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).

I already have set

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

What I want to achieve is, that the keyboard acts as an overlay and the content underneath bees 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. (*)

So my basic ideas are:

• prevent the browser from calculating the new sizes (as if no resize happened)
• set the keyboard to act as an overlay, not an individual element resizing the window
• keep the keyboard open in my already tested prevent-resize method (*)

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

• javascript
• android
• html

• @NikolaLukic: Pretty sure it's supposed to be a regular webapp (hence the first sentence: "This is for a HTML5/Javascript WebApp."). Also, bumping for interest. – Priidu Neemre Commented Jan 27, 2017 at 9:08
• Well , you can call this function from android app level also. Maybe you need position:fixed ... – Nikola Lukic Commented Sep 22, 2018 at 20:55

1 Answer 1

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