Brit Gardner

Fixing the Keyboard Issue on the Current Version of PhoneGap

PhoneGap currently has an issue with the keyboard not appearing whenever a form input is selected on a web site.  The key here is that the keyboard IS actually showing up, but it is being drawn behind the UIWebView used to render the webpage.

Here’s the solution I came up with.  I don’t understand enough about the rendering heirarchy to explain the why, but here’s the how:

In the GlassAppDelegate.m source file you should see a block of code that looks like the following:

 // Set up the image picker controller and add it to the view
	imagePickerController = [[UIImagePickerController alloc] init];

	// Im not sure why the next line was giving me a warning... any ideas?
	// when this is commented out, the cancel button no longer works.
	imagePickerController.delegate = self;
	imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
	[window addSubview:imagePickerController.view];

Simply move this block of code BELOW the following line. This renders the imagePicker object after the web view.

webView.delegate = self;

Problem – the imagePicker is obscuring the web view! Simply add the statment imagePickerController.view.hidden = YES; to the above block of code so that the entire block looks like:

 // Set up the image picker controller and add it to the view
	imagePickerController = [[UIImagePickerController alloc] init];

	// Im not sure why the next line was giving me a warning... any ideas?
	// when this is commented out, the cancel button no longer works.
	imagePickerController.delegate = self;
	imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
        imagePickerController.view.hidden = YES;
	[window addSubview:imagePickerController.view];

As it sounds like, we are just hiding the imagePickerController’s view – we don’t need it when the application starts anyways. But, we do need it when we access the images API through javascript, so find the block:

else if([(NSString *)[parts objectAtIndex:1] isEqualToString:@"getphoto"]){
				NSLog(@"Photo request!");
				NSLog([parts objectAtIndex:2]);

				webView.hidden = YES;
        [window bringSubviewToFront:imagePickerController.view];
				NSLog(@"photo dialog open now!");
}

and add the line imagePickerController.view.hidden = NO; above webView.hidden = YES; so that the entire block looks like:

else if([(NSString *)[parts objectAtIndex:1] isEqualToString:@"getphoto"]){
				NSLog(@"Photo request!");
				NSLog([parts objectAtIndex:2]);
        imagePickerController.view.hidden = NO;
				webView.hidden = YES;
        [window bringSubviewToFront:imagePickerController.view];
				NSLog(@"photo dialog open now!");
}

Voila! Compile and run the app and the keyboard should now appear when a form input is pressed on your iphone.