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 have the most efficient solution to scroll into input automatically and make it visible. First you need to add the keyboard plugin(cordova plugin add com.ionic.keyboard) as mentioned by @Fedir. Then on your event handler of 'keyboardshow' event add the following code:

window.addEventListener('native.keyboardshow', function(e){ 
    setTimeout(function() {
        document.activeElement.scrollIntoViewIfNeeded();
    }, 100);
});

P.S: This is supported only on Android (Chrome) and Safari. :D

Answer 2

Only one solution which worked for my full-screen app, it's to add to the Cordova application ionic-plugin-keyboard plugin

cordova plugin add com.ionic.keyboard

JS code :

// This event fires when the keyboard will hide
window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    $("body").addClass("keyboardOn");
}

// This event fires when the keyboard will show
window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardHideHandler(e){
    $("body").removeClass("keyboardOn");
}

After that You could adjust the view with CSS.

ref.: https://stackoverflow.com/a/25823491/634275