How to prevent keyboard push up webview at iOS app

Question

When an input field at bottom of the screen has focus, the keyboard pushes up my webview and the upper part of the page is not visible anymore.

I want to prevent the keyboard pushing up the webview.

Anyone has an idea ?

Answer 1

Solved this issue using driftyco/ionic-plugins-keyboard (https://github.com/driftyco/ionic-plugins-keyboard)

First install keyboard plugin:

cordova plugin add com.ionic.keyboard

Now you can I) either disable native keyboard scrolling:

cordova.plugins.Keyboard.disableScroll(true);

or II) listen on native.keyboardshow event in deviceready and scroll back to top when keyboard shows:

window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    setTimeout(function() {
        $('html, body').animate({ scrollTop: 0 }, 1000);
    }, 0);
}

I used the II) approach because I liked the animated scrolling in my case. If you don't want to go with the animation replace the corresponding line with window.scrollTo(0, 0);. But I'm afraid that in that case you will again have to deal with this "litter jitter animation" Imskull wrote about.

Answer 2

I LITERALLY WENT THROUGH 100 answers before I had to find answer myself. so here it is how to disable scroll of UI on IOS. simply when cordova is loading, add this. Please install:

cordova plugin add ionic-plugin-keyboard --save

and then do cordova prepare to load this new plugin in your www folder.

document.addEventListener('deviceready', function(e){
    window.addEventListener('native.keyboardshow', function () {
            cordova.plugins.Keyboard.disableScroll(true);
        });
});

And that's it. Please let me know if this was helpful. I will be glad to answer more.

Answer 3

On focus, set window.scrollTo(0,0); This prevents keyboard from pushing up webview completely

$('input').on('focus', function(e) {
    e.preventDefault(); e.stopPropagation();
    window.scrollTo(0,0); //the second 0 marks the Y scroll pos. Setting this to i.e. 100 will push the screen up by 100px. 
});

If you don't want to set a static value for your Y scroll position, feel free to use this short plugin I've written that automatically aligns the keyboard underneath the input field. It's not perfect, but it does the job. Just call this on focus as shown above:

setKeyboardPos(e.target.id);

Answer 4

make sure of this in your config.xml

<preference name="KeyboardShrinksView" value="true" />

Answer 5

I had the same problem and none of the solutions above helped me but I found a simple way to go past it.

In the platform/android folder open the manifest.xml and in the main activity tag replace the android:windowSoftInputMode="adjustResize" attribute with android:windowSoftInputMode="adjustPan"

now the keyboard will overlay your content.

I hope it will help someone.