Scroll to Focused Field Cordova

Question

My Issue

I am currently in the process of writing an application for iOS using Cordova. I have a page with a form on it like so:

When the user taps on a field, the keyboard appears as expected on iOS. However, to prevent my app from moving off the screen, I have enabled the following setting:

// Prevent the keyboard from pushing up the webview
cordova.plugins.Keyboard.disableScroll(true);

Unfortunately, this prevents a few things that are causing me issues:

1. When a field is focused, the screen does not scroll to that field so sometimes, the field appears behind the keyboard.
2. Even if I did have a solution to the above, for the elements that are at the bottom of the screen, I will not be able to scroll down far enough to bring them into view above the keyboard.

My Question(s)

Solution 1

Is there any way, in Cordova, to auto scroll to the focused field without moving the whole app off the screen?

If it is possible, then how can I handle fields that are close to the bottom and cannot be scrolled up any further into view?

Obviously, the first point can be achieved using JavaScript/jQuery and some clever logic with the keyboard_height, position() and scrollTop(). But, this then creates the issue with the second point about the input fields behind the keyboard...

Solution 2

If I apply the following code, it will fix the issue highlighted above, but it will create another issue (explained below):

// Enable the auto scroll when the keyboard is shown
cordova.plugins.Keyboard.disableScroll(false);

Is there anyway to fix my header (the 'Edit Profile' bit), to the top of the screen to ensure that part is always visible?

Answer 1

Use https://www.npmjs.com/package/cordova-plugin-keyboard#keyboardshrinkview and its Keyboard.shrinkView method.