How to fix keyboard issues with Cordova 3.1 on iOS?

Question

I just tested Cordova 3.1 with a sample iOS app and experienced several keyboard issues.

App settings:

• Xcode 5
• Status bar is hidden
• Landscape mode

config.xml

Issues:

1. All versions: when focus on an input field then whole view is pushed up including navbar.

2. iOS5/6: tap on an input field to open keyboard, then a black gap is briefly displayed at top of screen before keyboard pushes whole view up (is it status bar?)

3. iOS7: there is no black gap like #2 issue, but there are other issues:

   • I still see accessories bar before it's removed (hidden).

   • Keyboard is translucent then I can see darker background in the space where current view is pushed up.

If I changed , things are even worse:

• View is still pushed up, and when input field loses focus then a black gap is flickring at the top of screen, even on iOS 7, what doesn't happen if KeyboardShrinksView = false.

• Keyboard is no longer translucent on iOS 7.

Below is my config.xml

<preference name="DisallowOverscroll" value="true" />
    <preference name="HideKeyboardFormAccessoryBar" value="true" />
    <preference name="KeyboardDisplayRequiresUserAction" value="false" />
    <preference name="KeyboardShrinksView" value="true" />
    <preference name="SuppressesIncrementalRendering" value="false" />
    <preference name="TopActivityIndicator" value="gray" />
    <preference name="EnableLocation" value="false" />
    <preference name="EnableViewportScale" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="MediaPlaybackRequiresUserAction" value="false" />
    <preference name="AllowInlineMediaPlayback" value="false" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="Fullscreen" value="true" />
    <preference name="Orientation" value="landscape" />

Lysine

What does your HTML look like? Do you have the viewport meta tag? – Parlormaid

These issues didn't happen in PhoneGap 3.0, and HTML file is still unchanged so I assume that they're plugin/configuration issue. – Lysine

This stuff only happens in landscape mode, right? – Parlormaid

Answer 1

Check out this thread. A lot of the same issues were reported here. It would be best if you added your information to the Cordova JIRA bug tracking system since that's where all the cordova developers work out of. https://issues.apache.org/jira/browse/CB-3020?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13769996#comment-13769996

I was able to get the top header from sliding around by adding in a simple animation to the resizing of the webview. Here is the code that was put in the keyboardWillShow function in CDViewController.m

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
[self.webView setFrame:(CGRectMake(newFrame.origin.x, newFrame.origin.y, newFrame.size.width, newFrame.size.height))];
[UIView commitAnimations];

I was close to getting the black bar from being hidden but couldn't get it working very well. This post describes what you will need to do. You'll need to hae the webview reizing animation match the keyboard animation. iOS 7 - Keyboard animation

Wonted

Thanks, I'll trying it soon. BTW, issue is raised here issues.apache.org/jira/browse/CB-5227 – Lysine

Great stuff, I also needed to add this for it to work perfectly [UIView setAnimationBeginsFromCurrentState:YES]; – Coypu