Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android soft keyboard hides inputs from CordovaWebView when in fullscreen

I have a CordovaWebView that presents some html forms. When i focus on an input field, the Android's soft keyboard pops up and, for certain fields, according to their position, it gets on top of it. Basically, it is not resizing the layout of CordovaWebView.

Whatever i do, i can't change this, and it is said that it is related to the fact that the CordovaWebView is in fullscreen mode.

How can i accomplish to resolve this?

PS: is it, or not, a bug?

Thank you all!

like image 491
José Silva Avatar asked Jun 19 '13 15:06

José Silva


2 Answers

In fact, it is a well know bug, as @user2493245 said. But I found a workaround, at least regarding my specific case.

on WebView, just check for the coordinates for the View's visible area.

final View activityRootView = this.root;
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
    public void onGlobalLayout() {
        Rect r = new Rect();
        //r will be populated with the coordinates of your view that area still visible.
        activityRootView.getWindowVisibleDisplayFrame(r);

        int heightDiff = activityRootView.getRootView().getHeight() - (r.bottom - r.top);
        if(heightDiff != lastValue) {
            if (heightDiff > 100) { // if more than 100 pixels, its probably a keyboard...
                appView.sendJavascript("onKeyBoardShow(" + r.bottom + ");");
            } else {
                appView.sendJavascript("onKeyBoardHide();");
            }
            lastValue = heightDiff;
        }
     }
});  

As you can see, I send that information to the WebView. On HTML, I have this two methods to handle the issue:

function onKeyBoardShow(bottom) {
    var diff = ($('input[type=text]:focus').offset().top - bottom) + 50;
    if(diff > 0) {
        $('body').css("top", (diff * -1) + "px");
    }
};

function onKeyBoardHide() {
    $('body').css("top", "0px");
};

Basically, onKeyBoardShow, it gets the input field focused and calculates the amount of pixels that will be necessary to move the body, allowing the user to see the input field. onKeyBoardHide, simply puts the body to its original position.

PS: This only functions when the viewport targets devicedpi, as we need to modify the way we get the dif regarding the dpi of the device.

PS2: First amount of code is not mine, I only edited to fill my needs. I saw that on a SO question, but unfortunatelly now i can't find it. If i find it, i'll post the link here.

like image 185
José Silva Avatar answered Oct 24 '22 02:10

José Silva


I have the same problem and i found out it is a well known bug.

A workaround could be that u write a plugin that disables the fullscreen just before the softkeyboard pops up and reenables it afterwards.

like image 20
Nico Avatar answered Oct 24 '22 02:10

Nico