title: Programmatically show soft keyboard on iPhone in a PhoneGap application?
body: <p>I've been searching far and long, and to this moment, I did not come across a <strong>working solution</strong> for PhoneGap / Cordova applications that would show soft keyboard programmatically.</p>
  
  <p><strong>Scenario:</strong></p>
  
  <p>We have a PhoneGap application - a website created in jQuery Mobile - that at one point shows a dialog to the user. This dialog is also a web page and has one single INPUT text box where user should enter a code.</p>
  
  <p><strong>Problem:</strong></p>
  
  <p>When the code dialog is shown, the <strong><em>input box is focused using JavaScript</em></strong>. However, due to restrictions placed on iPhone's internal browser, the soft keyboard does not come up until the user actually really clicks inside the input text box.</p>
  
  <p><strong>What we tried:</strong></p>
  
  <ul>
  <li>creating a <strong><em><a href="https://stackoverflow.com/questions/467601/display-the-iphone-keyboard">hidden text box</a></em></strong> and making it <strong><em>first responder</em></strong></li>
  <li>making the actual <strong><em>webview a first responder</em></strong> once the input receives focus via JavaScript</li>
  <li>using <strong><em>sendActionsForControlEvents</em></strong> to try and delive Touch events to the webview (although if anyone has a working code for a PhoneGap application, I would appreciate if they could share it, since I'm no professional in iOS coding)</li>
  </ul>
  
  <p>Any ideas?</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> The restriction mentioned in this question is for <strong><em>built-in browsers</em></strong> only... if you're aiming Opera, you will be successful by using the following code:</p>
  
  <pre><code>var e = jQuery.Event("keydown", { keyCode: 37 });
  $('#element').focus().trigger(e);
  </code></pre>
  
  <hr>
  
  <p><strong>EDIT2:</strong> This is a final working PhoneGap code that can be used in a plugin: </p>
  
  <p><em>keyboardhelper.h</em></p>
  
  <pre><code>//
  //  keyboardHelper.h
  //  soft keyboard displaying plugin for PhoneGap
  //
  //  Copyright 2012 Martin Ambrus.
  //
  
  #import &lt;Foundation/Foundation.h&gt;
  #ifdef CORDOVA_FRAMEWORK
  #import &lt;Cordova/CDVPlugin.h&gt;
  #else
  #import "CDVPlugin.h"
  #endif
  
  @interface keyboardHelper : CDVPlugin {
      NSString *callbackID;
  }
  
  @property (nonatomic, copy) NSString *callbackID;
  
  - (void)showKeyboard:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;
  
  @end
  </code></pre>
  
  <p><em>keyboardhelper.m</em></p>
  
  <pre><code>//
  //  keyboardHelper.m
  //  soft keyboard displaying plugin for PhoneGap
  //
  //  Copyright 2012 Martin Ambrus.
  //
  
  #import "keyboardHelper.h"
  #import "AppDelegate.h"
  
  @implementation keyboardHelper
  @synthesize callbackID;
  
  -(void)showKeyboard:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options {
      self.callbackID = [arguments pop];
  
      //Get text field coordinate from webview. - You should do this after the webview gets loaded
      //myCustomDiv is a div in the html that contains the textField.
      int textFieldContainerHeightOutput = [[((AppDelegate *)[[UIApplication sharedApplication] delegate]).viewController.webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"myCustomDiv\").offsetHeight;"] intValue];
  
      int textFieldContainerWidthOutput = [[((AppDelegate *)[[UIApplication sharedApplication] delegate]).viewController.webView  stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"myCustomDiv\").offsetWidth;"] intValue];
  
      int textFieldContainerYOffset = [[((AppDelegate *)[[UIApplication sharedApplication] delegate]).viewController.webView  stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"myCustomDiv\").offsetTop;"] intValue];
  
      int textFieldContainerXOffset = [[((AppDelegate *)[[UIApplication sharedApplication] delegate]).viewController.webView  stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"myCustomDiv\").offsetLeft;"] intValue];
  
      UITextField *myTextField = [[UITextField alloc] initWithFrame: CGRectMake(textFieldContainerXOffset, textFieldContainerYOffset, textFieldContainerWidthOutput, textFieldContainerHeightOutput)];
  
      [((AppDelegate *)[[UIApplication sharedApplication] delegate]).viewController.webView addSubview:myTextField];
      myTextField.delegate = self;
  
      CDVPluginResult* pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString: @"ok"];
  
      [self writeJavascript:[pluginResult toSuccessCallbackString:self.callbackID]];
  }
  
  -(BOOL)textFieldShouldReturn:(UITextField *)textField
  {
  //here you create your request to the server
  return NO;
  }
  
  -(BOOL)textFieldDidEndEditing:(UITextField *)textField
  {
  //here you create your request to the server
  return NO;
  }
  
  @end
  </code></pre>
  
  <p><em>javascript</em></p>
  
  <pre><code>var keyboardHelper = {
      showKeyboard: function(types, success, fail) {
          return Cordova.exec(success, fail, "keyboardHelper", "showKeyboard", types);
      }
  };
  </code></pre>