Preventing iOS Keyboard from scrolling page in cordova 3.5

Question

I am using Cordova 3.5 and jQuery mobile to build an iOS app. I have disabled scrolling in most of the app; however, when I select an input field, the iOS keyboard opens and scrolls the page up. I do not want this functionality. Since the input is high enough that the keyboard would not cover it up, I want the page to remain still while the keyboard covers up the bottom part of the page.

This question is similar to a number of others like this one, and is the opposite of the problem posted here.

However, none of the posted answers worked for me, so I will post my solution here.

score 15 · Accepted Answer · answered Jul 22 '14 at 01:32

15

Add this plugin with

cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git

in the command line.

Add the following line anywhere it the javascript to disable scrolling from the keyboard.

cordova.plugins.Keyboard.disableScroll(true);

In my use case, I added a deviceready event listener to evaluate this line, disabling the automatic keyboard scrolling everywhere in the app.

That's it!

answered Jul 22 '14 at 01:32

user3558515

494
1
3
10

1

This plugin disables all scrolling in my app - is there any other setup that I need to do to only disable the auto-scrolling and not all scrolling? – Tom Lagier Feb 18 '16 at 18:47
You might want to explore re-enabling scrolling with cordova.plugins.Keyboard.disableScroll(false); when the keyboard is hidden. You can tell when the keyboard is hidden with the native.keyboardhide event. The README at https://github.com/driftyco/ionic-plugin-keyboard has some information about how the plugin works that might be useful. It's been a while since I've worked with this though, so if you're having trouble you might want to ask a new question. – user3558515 Feb 19 '16 at 23:44
Cannot find name 'cordova'. L38: ngAfterViewInit() { L39: cordova.plugins.Keyboard.disableScroll(true); – user3044394 Nov 11 '17 at 18:37
This function has been removed on latest version of the plguin. https://github.com/ionic-team/cordova-plugin-ionic-keyboard/issues/42 – joHN Jan 07 '19 at 04:19

tim-montague · Answer 2 · 2019-01-11T08:54:19.223

4

From my experience, and saying this as a developer who avoids 3rd party plugins as much as possible, I've found that virtual keyboard issues in Cordova are best solved with a plugin.

The Cordova plugin directory has several keyboard plugins (http://cordova.apache.org/plugins/?q=keyboard)

I recommend the following plugin:
https://github.com/cjpearson/cordova-plugin-keyboard

Which provides the following command to disable scrolling when the virtual keyboard is open.

cordova.plugins.Keyboard.disableScrollingInShrinkView(true);

edited Jan 11 '19 at 08:54

answered Jan 07 '17 at 22:38

tim-montague

16,217
5
62
51

1

Please don't just post some tool or library as an answer. At least demonstrate [how it solves the problem](http://meta.stackoverflow.com/a/251605) in the answer itself. – Zoe Jan 09 '19 at 17:10

score 1 · Answer 3 · answered Jul 05 '21 at 15:31

1

After a lot of research I found a really simple answer and none of the others worked.

In your css do:

html {
  touch-action: none;
}
body {
  touch-action: all;
}

answered Jul 05 '21 at 15:31

Kevin

89
1
3

This works with a quasar cordova app. The plugin solutions did NOT work. – ak22 Sep 16 '21 at 14:47

Preventing iOS Keyboard from scrolling page in cordova 3.5

3 Answers3

Linked