[iOS] Cordova Keyboard Avoidance without resizing web view

66 views
Skip to first unread message

Kerri Shotts

unread,
Apr 17, 2015, 1:12:10 AM4/17/15
to phon...@googlegroups.com
I've created a repository at https://github.com/kerrishotts/cordova-keyboard-example with an example of how I scroll text fields into view while avoiding the soft keyboard. This example doesn't pan, nor does the webview itself resize, and so the behavior is more aligned with the way iOS handles avoidance natively. This means that the keyboard will overlay content without necessarily pushing it up, so tool bars and tab bars will be obscured by the keyboard, which is the way native apps also work. At the same time, scrolling containers are resized to fit within the reduced viewport so all the elements within are still accessible by the user. If an element is focused, the example will also scroll it into view, either instantaneously or smoothly. It's not perfectly native -- but it's definitely an improvement over the panning experience, and more natural than just resizing the web view as a whole.

Note that this isn't a drop-in solution for every app, since it's dependent upon how the DOM is structured, but it hopefully it can be useful to someone. :-)

I'm still working on this, and I'm sure there are kinks and edge cases that I haven't encountered or considered. If anyone has additional contributions, feel free to submit an issue or create a pull request.


james

unread,
Apr 17, 2015, 10:23:03 AM4/17/15
to phon...@googlegroups.com
nice, Thank you

Jesse Monroy

unread,
Apr 25, 2015, 11:27:56 PM4/25/15
to phon...@googlegroups.com
Thanks Kerri, I've bookmarked it and I will pass it along to other developers.
At first glance your README looks very good. If I get some time, I'll make
the adjustment for PhonegapBuild

Jesse
Reply all
Reply to author
Forward
0 new messages