watusi / jquery-mobile-iscrollview

JQuery Mobile widget plug-in for easy use of the iScroll javascript scroller.
407 stars 183 forks source link

extra input box #106

Closed thenibbana closed 11 years ago

thenibbana commented 11 years ago

Hello, thanks a lot for your effort on this project. It's truly appreciated. I am using a JQM 1.3 . The form has some input field. However, when I type a character, and scrolls it overlays an extra input box . This didn't happen until I implemented iscrollview. Any help would be appreciated. fivv9

jtara commented 11 years ago

The widget does not currently support input on many mobile devices, and specifically iOS. This is mentioned in the documentation. I haven't found that anyone has had much luck with this using iScroll either with or without jquery.mobile.iscrollview.

This is difficult to impossible to do, unfortunately, because the Mobile Safari browser is very intrusive during input and lacks options to control it's behavior during input. It tries to center input fields by scrolling the page and/or (not clear) the UIScrollView (native) that the browser wraps around the UIWebView. Obviously, that will not work if you are using iScroll. Additionally, it has the "forms assistant" bar (next/previous) above the keyboard, which is not always wanted. Finally, iOS does not resize the browser window when the keyboard appears, and so you can't properly scroll while the keyboard is shown (can't reach all parts of the page). (Android, apparently, does.)

I am currently working on a project where we are doing input on pages that use jquery.mobile.iscrollview. It disables the page scrolling using native code, resizes the window when the keyboard is shown, and uses some JS to center inputs by scrolling the scroller rather than the page. It also permits the forms assistant to be disabled. It works best with full-screen headers/footers, and plays some tricks, making them look like normal headers/footers, but then they go semi-transparent during input. (Because iOS insists that inputs be centered in the space above the keyboard, regardless of presence/absence of a header.)

It's really quite a bit of nonsense that is required, because Apple wants to be so "helpful" in form-filling.

It works fairly well, but there are still issues with textarea fields. However, it requires a native extension on iOS. (Currently in Rhodes, but could certainly be done in PhoneGap.) A solution for browser may be possible, but will need to make assumptions about keyboards. (No custom keyboards.) It needs to know the size of the keyboard, and that's not available without native code.

I hope to get permission to release native extensions for Rhodes and PhoneGap.