Prevent document reflow/browser resize when android keyboard opens

前端 未结 1 906
鱼传尺愫
鱼传尺愫 2021-02-08 19:00

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 siz

1条回答
  •  野的像风
    2021-02-08 19:41

    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
    

    0 讨论(0)
提交回复
热议问题