PhoneGap: Android soft keyboard covers input fields

Question

I am having issues with a PhoneGap application that I'm working in. My app has lots of forms, since the objective of the app is mostly to provide a nice user interface to a database. However, whenever the user tries to edit an input field that is close to the bottom, the Android keyboard will pop up and cover the field, so that the user cannot see what he/she is writing.

Do you know if there is a workaround for this? Has anyone come across this issue on their apps?

Answer 1

What you can do in this case (what I did when I had this problem...): add on-focus event on fields, and scroll up document. So you will see input field on the top of page :)

Answer 2

I agree with Paulius, for Android I found this to be the cleanest solution. I know this is an old question but I will share my solution for other people if any body is still facing this issue.

// fix keyboard hiding focused input texts
// using native keyboard plugin and move.min.js
// https://github.com/vitohe/ionic-plugins-keyboard/tree/f94842fec1bacf72107083d2e44735e417e8439d
// http://visionmedia.github.io/move.js/
// not tested on iOS so implementation is for Android only
if ($cordovaDevice.getPlatform() === "Android") {
    // device is running Android
    // attach showkeyboard event listener 
    // which is triggered when the native keyboard is opened
    window.addEventListener('native.showkeyboard', keyboardShowHandler);

    // native.showkeyboard callback
    // e contains keyboard height
    function keyboardShowHandler(e) {
        // get viewport height
        var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        // get the maximum allowed height without the need to scroll the page up/down
        var scrollLimit = viewportHeight - (document.activeElement.offsetHeight + document.activeElement.offsetTop);

        // if the keyboard height is bigger than the maximum allowed height
        if (e.keyboardHeight > scrollLimit) {
            // calculate the Y distance
            var scrollYDistance = document.activeElement.offsetHeight + (e.keyboardHeight - scrollLimit);
            // animate using move.min.js (CSS3 animations)
            move(document.body).to(0, -scrollYDistance).duration('.2s').ease('in-out').end();
        }
    }

    window.addEventListener('native.hidekeyboard', keyboardHideHandler);

    // native.hidekeyboard callback
    function keyboardHideHandler() {
        // remove focus from activeElement 
        // which is naturally an input since the nativekeyboard is hiding
        document.activeElement.blur();
        // animate using move.min.js (CSS3 animations)
        move(document.body).to(0, 0).duration('.2s').ease('in-out').end();
    }
}

The end result is unbelievably smooth.