input field hidden when soft keyboard appears in phonegap

Question

Creating a mobile application using Phonegap 3.6.3 for Android and iOS. The problem is only for Android, as iOS acts as I would like it to.

When I click on an input

Answer 1

I am using the Ionic Keyboard Plugin to detect when the keyboard is open and add necessary padding accordingly to the body:

phonegap plugin add ionic-plugin-keyboard --save

When the events fire, you can adjust the padding-bottom on the body to match the height of the keyboard.

Then, in order to detect if the focused element is visible, you have to do the math and scroll the container if necessary. The final code I am using is the following:

cordova.plugins.Keyboard.disableScroll(true);
$$(window).on('native.keyboardshow', function(e) {
    $$('body').css('padding-bottom', e.keyboardHeight + 'px');

    var el = $$('input:focus, textarea:focus');
    var content = el.closest('.page-content');
    var offset = el.offset().top + content.scrollTop();
    /* 15 is an arbitrary value to add a bit of padding */
    var safeAreaHeight = el.outerHeight(true) + 15;
    var maxPosition = content.height() - safeAreaHeight;
    if (content.scrollTop() < (offset - maxPosition)) {
            content.scrollTop(offset - maxPosition);
    }

});
$$(window).on('native.keyboardhide', function(e) {
    $$('body').css('padding-bottom', 0);
});

The code makes use of Framework7 and its Dom7 library which is very similar to jQuery. It assumes the scrollable element is .page-content, but you can adjust it accordingly.

You should leave the android-windowSoftInputMode preference at its default value.