UPDATE : This is "fixed". See the bottom of the post.

So, I'm working on the Kids In Touch app and getting killed by forms in iOS 7. Unfortunately, iOS 7 handles forms very differently than in iOS 6. In fact, a form in a web page in iOS 7 behaves completely different than the same form in a "web app" on the home screen or as a native app wrapped in PhoneGap. This makes developing REALLY fun!

I'll post a video of this whole process so you can watch it more easily. However, here are the basic steps to show the problem.

Base Form In Safari

Using an iOS 7 device or simulator, go to http://kidsintouch.com/keyboard-testing/ in Safari. This page is using the new Clarity CSS UI from CSSFlow It's just a simple little form with a bunch of fields. So, without doing any scrolling, click in the input area for Field 7. The keyboard pops up, the form moves up in the remaining view and you can type to your hearts content. Great. All Is well.

A field with focus in Safai on iOS 7

Now, use the "Add to Home Screen" option to save this as a web app. Now, open the web app. Looks the same right? Again without doing any scrolling, click in the input area for Field 7. The keyboard pops up and ... Wait a minute! Where's Field 7? The keyboard is there so do some typing. Still ... no Field 7. So, kill the keyboard and you'll see that Field 7 did not update with your entered data.

A field in a "web app" in iOS 7 may not show properly

Pretty lousy, right? The only way to get to Field 7 in this page is to click on Field 7, wait for the keyboard, then scroll to Field 7 in the remaining view. Pretty lame right?

But.... I've discovered a trick. It's new to me at least. Start from scratch with your web app - so be scrolled to the top of the screen again. Now, click the "Field 7" label - not in the input area. Tada! The keyboard pops up, the screen scrolls so that Field 7 is visible and receives input.

Using the "click on label" trick, iOS 7 will properly show a field in a web app or PhoneGap app.

Field_7_Web_App_Clicked_Label

Why in the world is that? When developing an actual app (with Phonegap / Cordova) this is a real nightmare. I've tried dozens of ways to avoid this. I've played with scrollTop and scrollIntoView, KeyboardShrinksView and many other options. Nothing works very well or consistently. I certainly can't expect users to click on field labels rather than the actual fields.

So, my current solution is pretty much a pain in the rear, but it works. For the Kids in Touch app, I use AngularJS. I've disabled all of the field inputs and added a directive to all the labels. Since the field is disabled and the label wraps it, when the user "clicks" a field, the label is actually what gets clicked. Then, the directive disables the appropriate input and puts focus on the input. Tada! iOS 7 scrolls to the correct field and all is well. This leads to other problems though. Now, without some more trickery, users can't use the Next and Previous buttons to quickly fill out the form.

UPDATE : After creating a rather lousy JavaScript/CSS/ Fake Span fix to this problem the last few days, I Googled again for more info. I stumbled across a solution at:

http://stackoverflow.com/a/19182670/75644

Basically, a different meta tag is used. It seems to solve my problem perfectly. You can test this new version at

http://kidsintouch.com/keyboard-testing/keyboard-fixed.html

Anyone have more info on the matter.