Android soft keyboard hides inputs from CordovaWebView when in fullscreen

Question

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!

score 5 · Accepted Answer · answered Jun 21 '13 at 12:15

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.

@AnasAzeem when onCreate(), i init `lastValue=0`. forgot to add it to the example. cheers! — José Silva, Nov 22 '13 at 15:45

score 1 · Answer 2 · answered Jun 20 '13 at 11:03

1

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.

answered Jun 20 '13 at 11:03

Nico

101
1
6

thanks for your answer, but I've found a simpler way, that I'll post right away. :) – José Silva Jun 21 '13 at 11:51

score 0 · Answer 3 · answered Aug 07 '15 at 20:20

Remove android:theme="@android:style/Theme.NoTitleBar.Fullscreen" from manifest, and add these 2 lines of code:

requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().addFlags(LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

Make sure your onCreate method looks like this:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().addFlags(LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

        super.onCreate(savedInstanceState);
        setContentView(R.layout.yourLayout);

        // Your code ...
}

And everything will work :D.

Android soft keyboard hides inputs from CordovaWebView when in fullscreen

3 Answers3

Linked