Keyboard hides iOS input fields in PhoneGap Build 3.1 with iFrame / object and JQTouch

Question

I am developing an application that downloads a form from another website in iFrame. The IFrame is set to 100% width and height when displayed. This website has JQTouch.

When I touch the input field in iOS 7 on the iPhone, the keyboard pops up and closes the input field. It does not scroll, does not resize or even allows you to scroll down to see the input field. If I type and close the keyboard, nothing will happen.

I tried everything I came across. Adding / removing height = device height in the metadata metaphor did nothing. The one closest to the solution added the preference "KeyboardShrinksView = true" in the config.xml file. This made it scroll (but not enough) and constantly click on the site for about 20 pixels or so.

I have been working on this for the past two days without any solution. This is mistake? How does JQTouch interact with PhoneGap design?

UPDATE: there are still no corrections, but for verification I took out the form page from the iframe and installed it using window.location.href = "www.mywebsite.com"; In this situation, the keyboard works. This is not yet suitable for me, but may provide information on why it does not work.

UPDATE 2: I am restructuring the application to use window.location.href and not an iframe or html object. This creates some minor problems, but they are better than the keyboard not working. If anyone has an answer, I still want to see it.

Answer 1

Major Edit: I just realized that the InAppBrowser plugin will NOT fix a keyboard error. I did some more research, and this topic helped . I had to add "height = device-height" to each meta viewport tag. "width = device-width" should fix any problems viewing the site in mobile Safari. The end result is as follows:

<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/> 

One of them also had a semicolon selected, so be sure to check and double-check for syntax errors, as they can cause a problem.

If this does not work, there is another solution that you can try instead of or in addition to fixing the meta viewport. I linked some comments in this thread and makes some changes to CSS. Changing this does not fix anything in my code, but it helped at least one person, so it’s worth checking if you still need a solution.

I checked this fix with an iframe and an object and it didn’t work - InAppBrowser is still needed.

/ Major change.

Here are some workarounds that worked for me:

• Use the InAppBrowser plugin . This allows the application to interact with the loadstart / loadstop / loaderror events on the loaded page inside InAppBrowser. This is the solution I propose. However, with iOS 7 you will need to hide the status bar manually, the solution for which is here

• OR Download the page using window.location.href = [site url]. If you don’t need to worry about interacting with or returning to the application or link to external sites (both of which I need), this is the way to go. It is quite simple, but some features of the first solution are missing.

• OR Get rid of JQTouch. I could not do this, but much of this is superfluous when you create an application using PhoneGap.