Phonegap Android keyboard covers input elements scrolling is disabled

Question

I\'ve tried many different solutions and nothing is quite what I want. What I want is for the keyboard to show on top of the content (keeping the content the same size) whi

Answer 1

I was also facing the same issue as it is a framework related issue. I have found work around-

constructor(
        private platform: Platform,
        private keyboard: Keyboard
      ) {
        if(this.platform.is('android')){
          this.keyboard.onKeyboardShow().subscribe((e) => {
             var keyboardHeight = e.keyboardHeight;
             keyboardHeight = keyboardHeight ? keyboardHeight : '337';
             $('body').css('height', 'calc(100vh - ' + keyboardHeight + 'px)');    
      });

      this.keyboard.onKeyboardHide().subscribe(e => {
       $("body").css("height", "100vh");
      });
    }
}

I have used 337 which is keyboard height for default, mainly for that condition if keyboard height in not available.

library needed:

    npm install jquery
    npm install @types/jquery
    ionic cordova plugin add cordova-plugin-ionic-keyboard
    npm install @ionic-native/keyboard

imports

    import { Platform } from '@ionic/angular';
    import * as $ from "jquery";
    import { Keyboard } from '@ionic-native/keyboard/ngx';

Answer 2

For most of the cases in config.xml change the full screen preference to false. that'll do the trick.

<preference name="fullscreen" value="false" />

Answer 3

I added an event listener for the keyboard event and scrolled to the input only if it was off screen.

For my case I only wanted to scroll when the keyboard was being shown for the first time, and only if the input item was offscreen.

document.addEventListener('showkeyboard', onKeyboardShow, false);


 function onKeyboardShow(e) {        
    setTimeout(function() {
      e.target.activeElement.scrollIntoViewIfNeeded()
    }, 500) //needed timeout to wait for viewport to resize
  }

To get the showkeyboard event to fire I needed to have the following in my AndroidManifest.xml

  android:windowSoftInputMode="adjustResize"

Answer 4

I have the most efficient solution to scroll into input automatically and make it visible. First you need to add the ionic keyboard plugin (works on any cordova project) because the eventlistener 'showkeyboard' does not work now.

cordova plugin add ionic-plugin-keyboard --save

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 5

I had the same problem for android project output and in my situation the input elements were not moving upwards the keyboard . And after a-night-taking search (including those config changes and others) I found that in my angularjs cordova project

StatusBar.overlaysWebView(true);
StatusBar.hide();

lines which are in my controller causing that annoying problem . And I was using those lines for ios statusbar issues now I took those in an if condition and the problem is fixed.

if( device.platform=="iOS")
  {
   StatusBar.overlaysWebView(true);
   StatusBar.hide();
  }

Answer 6

You can detect focused textarea or input, then wait a while until keyboard is shown and finally scroll the page to reach focused input.

$("#textarea").focus(function(e) {
    var container = $('#container'),
        scrollTo = $('#textarea');

    setTimeout((function() {
        container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });
    }), 500);

});

When keyboard is hidden the textarea keeps focused, so if it's clicked again the keyboard will show and the container needs to scroll again to show the input

$("#textarea").click(function(e) {
    e.stopPropagation();
    var container = $('#container'), //container element to be scrolled, contains input
        scrollTo = $('#textarea');

    setTimeout((function() {
        container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });
    }), 500);
});

Hope this helps, cheers!