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 figured out the problem. I have a media query in my CSS where the size of certain elements change for smaller screen sizes. Editing that query fixed my problem.

Answer 2

I am using the Cordova plugin 'ionic-plugin-keyboard' and listen to the 'native.keyboardshow' and 'native.keyboardhide' events to resize the HTML container element of my form:

    window.addEventListener('native.keyboardshow', function (e) {
        container.style.bottom = e.keyboardHeight + "px";
    });

    window.addEventListener('native.keyboardhide', function () {
        container.style.bottom = null;
    });

This results in the proper input fields to scroll into view (also when tabbing back and forward between the fields.

Answer 3

If you have made correctly the project as Cordova documentation says, It won't happen.

May be are you using a scroll library like iScroll?

Answer 4

I came up with this solution. I have a full screen Vuejs application which the container has the height of the screen height and then absolute positioned to the bottom, left and right to fix the same sort of issue on IOS.

I then had the same issue on Android so came up with the following;

window.cordovaPluginIonicKeyboardShift = function()
{
    /** This is my container (Vuejs instance) **/
    const inst = document.querySelector('#app');

    /** Get the height of the document **/
    const height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

    /** Where we will store the active input **/
    let input;

    /** The keyboard displaying is around 200 milliseconds **/
    inst.style.transition = 'transform 0.2s';

    /** Makes me feel better having this on to increase performance **/
    inst.style.transform = 'translateZ(0)';

    /**
     * Set Input
     * @param e
     */
    let setInput = function(e) {
        input = e.target;
    };

    /**
     * On Keyboard Show
     * @param event
     */
    let onKeyboardShow = function(event) {
        let offset = input.getBoundingClientRect();
        if(offset.top + input.clientHeight > height - event.keyboardHeight) {
            inst.style.transform = `translateZ(0) translateY(-${event.keyboardHeight}px)`;
        }
    };

    /**
     * OnKeyboard Hide
     */
    let onKeyboardHide = function() {
        inst.style.transform = `translateZ(0) translateY(0px)`;
    };

    /**
     * Hide Keyboard
     * @param e
     */
    let hideKeyboard = function(e) {
        if(e.target.tagName.toLowerCase() !== 'input' && e.target.tagName.toLowerCase() !== 'textarea') {
            if(typeof input !== 'undefined') input.blur();
            if(Keyboard.isVisible) Keyboard.hide();
        }
    };

    /**
     * Go through all inputs and textarea's on document and attach touchstart
     * event. Using touchstart to define the input before focus which is what will trigger
     * the keyboard.
     */
    inst.querySelectorAll('input, textarea').forEach(function(elm) {
        elm.removeEventListener('touchstart', setInput, false);
        elm.addEventListener('touchstart', setInput, false);
    });

    /**
     * Need to get the height to shift the document up by x amount
     */
    window.removeEventListener('keyboardWillShow', onKeyboardShow, false);
    window.addEventListener('keyboardWillShow', onKeyboardShow, false);

    /**
     * Shift it back down on keyboard hiding
     */
    window.removeEventListener('keyboardWillHide', onKeyboardHide, false);
    window.addEventListener('keyboardWillHide', onKeyboardHide, false);

    /**
     * Some browsers/phone models act odd when touching off the input
     * so this is in to cover all bases
     */
    document.removeEventListener('touchstart', hideKeyboard, false);
    document.addEventListener('touchstart', hideKeyboard, false);

};

It also turns out even installing the plugin has affected the normal use of the keyboard which is why the hide method is called as the keyboard doesn't go away without it.

Then on my Vuejs instances I have the following updated method;

updated: function () {
    this.$nextTick(function () {
        cordovaPluginIonicKeyboardShift();
    })
},

You'll also need to add this plugin;

phonegap cordova plugin add cordova-plugin-ionic-keyboard

Doing the above I have a successfully working fullscreen app with a working keyboard.

If you find yourself testing on Xcode Simulator and the keyboard is not showing, go to Simulator -> Device -> Erase all content and settings and re-install the app. No idea why this occurs but this will save you a lot of head aches.

Hope this helps someone