22

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 ?

6 Answers 6

27

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);
2
  • 5
    It doesn't work on my iPad2/iOS6. a "setTimeout(function() { windows.scrollTo(0, 0);}, 0)" can fix it, but sometimes you can still see a litter jitter animation.
    – Imskull
    Feb 20, 2014 at 3:55
  • I think it should be window not windows Aug 10, 2020 at 11:44
14

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.

1
  • if using WKWebView(iOS), it doesn't allow cordova.plugins.Keyboard.disableScroll(true); , seems like i will try II) and see what happens. Jun 8, 2015 at 6:35
4

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.

2
  • Thanks you saved me a lot of time.
    – Francesco
    Dec 12, 2016 at 15:54
  • The question is for iOS, not Android, how is this answer getting upvotes? Jun 12, 2019 at 13:08
4

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.

3
  • This plugin is deprecated - use github.com/ionic-team/cordova-plugin-ionic-keyboard
    – Brad
    Mar 12, 2020 at 13:40
  • Adding plugin "cordova-plugin-ionic-keyboard", solved my issue temporarily for iOS 13 as well
    – SSuman99
    May 4, 2020 at 3:55
  • Adding "cordova-plugin-ionic-keyboard", solved my issue for iOS 15, and I used it in a plain Cordova project (without Ionic). Just adding the plugin solved the problem, I didn't need to call disableScroll().
    – spodell
    Aug 5, 2022 at 22:01
4

Adding this option to the config.xml did the trick for me.

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

It has been removed in Cordova 3.2.0 but is available in cordova-plugin-keyboard.

You need to install this plugin and this option will work again

cordova plugin add cordova-plugin-keyboard
1
  • Mine was resolved by installing the cordova-plugin-ionic-keyboard plugin. Thanks! Feb 11, 2021 at 9:47
3

make sure of this in your config.xml

<preference name="KeyboardShrinksView" value="true" />
3
  • This should be the accepted answer since it solves the problem the correct way
    – pinturic
    Nov 3, 2017 at 17:36
  • Is there a modern day equivalent of this option? It seems to not exist anymore.
    – Coo
    Dec 1, 2017 at 5:26
  • 1
    this is removed as of cordova 8x Feb 12, 2019 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.