I'm currently working on a big ST2 + Phonegap project for iOS and Android. So far everything (Scanner, CORS Ajax Requests, Geolocation) is working fine.
The only thing I can't seem to figure out are several issues with scrollable forms. The problems on iOS and Android are different and vary depending on the devices used.
This is my layout:
Bildschirmfoto 2013-04-09 um 15.33.33.png
Behaviour on iOS:
When a input field is focused, the whole viewport will be scrolled to the center of the screen, so the field will be fully visible while typing.
Problem 1: If you use the 'next' and 'back' buttons of the softkeyboard, it will jump to the next / previous input field. If you do so from the first field to the last field of the form following bug will appear. The scrollable container get's a lot of extra padding at the bottom, but it can't be scrolled to the very top. The whole scrollable container can be scrolled off the viewport until it's not visible anymore.
Problem 2: If you scroll the scrollable container whilst the softkeyboard is still visible, the cursor is stuck on the screen where the input field used to be at.
Behaviour on Android:
I turned off the default "Android webview field focus behaviour" by setting the windowSoftInputMode to 'adjustPan'. Then i implemented my own function which basically scrolls the focused field to the middle of the scrollable area. (This is shown in IMG 2)
Problem 1: The cursor and the 'text position indicator' are rendered at the position the input field used to be at before the scroll. (I fixed the position of the cursor but not the 'text position indicators' by waiting 50ms before scrolling the field and then focusing it again after another 50ms )
Problem 2: The content of the focused input field can be added if there is no cursor in the field, but it can't be deleted. You could delete the whole input but it'll still be visible in the field. If you focus the field again and start typing, the new input will appear before the old input.
Problem 3: If you focus a field and start scrolling, the rendered focused field won't scroll but is stuck on the screen where the input field used to be at before scrolling. (you can see this in IMG 3)
Bildschirmfoto 2013-04-09 um 15.26.42.png
Has anyone experienced these problems, and by any chance has come across a solution? Am I doing something essentially wrong? I've searched the internet for these problems, but I couldn't find any working fixes.
The common fixes i've found are:
- android: adjustPan instead of adjustresize
- android: use window.scrollToTop to fix gap when softkeyboard is hidden
Hope anyone can help?!