Prevent document / browser updates when changing Android keyboard

Question

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

How do I prevent the browser / DOM from resizing my content (which is responsive, mostly vw / vh for sizes, etc.) when the Android open soft keyboard is opened? It happens that the content, especially the font size, changes after the keyboard is opened (for example, for input fields).

I have already installed

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

I want to make the keyboard act like an overlay, and the content under it becomes scrollable. So basically what android:windowSoftInputMode will do in the android manifest.

I also tried to listen for the window resize event and prevent it when the resize is in a certain range (see this answer for another question). But what happens here, the keyboard opens and immediately after closing. (*)

So my main ideas:

• prevent the browser from calculating new sizes (as if there were no resizing)
• set the keyboard as an overlay, not a separate window resizing element.
• keep your keyboard open in my already proven resizing method (*)

But I can not find a solution for any of them.

Answer 1

Ok, this is a fix for the html5 (browser) application.

 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 if the keyboard is open with 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; } 

First try to prevent the flag from being set:

 var object = document.getElementById("IwillOpenKeyboardOnMobile") object.addEventListener("focus", ONFOCUSELEMENT); function ONFOCUSELEMENT() { isKeyboardOpen = true; } // opposite event is blur