在PhoneGap应用程序中以编程方式显示iPhone上的软键盘？ [英] Programmatically show soft keyboard on iPhone in a PhoneGap application?

问题描述

我一直在寻找很久，到目前为止，我没有遇到一个工作解决方案，可以通过编程方式显示软键盘。

场景：

我们有一个PhoneGap应用程序向用户显示对话框。此对话框也是一个网页，并有一个单一的INPUT文本框，用户应该输入一个代码。

问题： b
$ b

当显示代码对话框时， 输入框使用JavaScript集中 。然而，由于iPhone内部浏览器的限制，软键盘直到用户真正点击输入文本框之前才会出现。

我们尝试：

• 创建 隐藏文本框 ，
  
• 一旦输入通过JavaScript获得焦点， 将实际的 web视图作为第一响应者 sendActionsForControlEvents 尝试将触摸事件传递给webview（虽然如果任何人有一个PhoneGap应用程序的工作代码，我很感激，如果他们可以共享它，因为我没有专业iOS编码）

有任何想法吗？

---

EDIT：此问题中提及的限制仅适用于内置浏览器 ...如果您瞄准Opera ，您将通过使用以下代码成功：

  var e = jQuery.Event（keydown，{keyCode：37 }）; 
 $（'＃element'）。focus（）。trigger（e）; 
 

---

EDIT2：是可以在插件中使用的最终工作PhoneGap代码：

keyboardhelper.h

  // 
 // keyboardHelper.h 
 //软键盘显示PhoneGap的插件
 // 
 //版权所有2012马丁·安布鲁斯。 
 // 
 
 #import< Foundation / Foundation.h> 
 #ifdef CORDOVA_FRAMEWORK 
 #import< Cordova / CDVPlugin.h> 
 #else 
 #importCDVPlugin.h
 #endif 
 
 @interface keyboardHelper：CDVPlugin {
 NSString * callbackID; 
} 
 
 @property（nonatomic，copy）NSString * callbackID; 
 
  - （void）showKeyboard：（NSMutableArray *）arguments withDict：（NSMutableDictionary *）options; 
 
 @end 
  

keyboardhelper.m

  // 
 // keyboardHelper.m 
 //显示PhoneGap插件的软键盘
 // 
 //版权所有2012 Martin Ambrus。 
 // 
 
 #importkeyboardHelper.h
 #importAppDelegate.h
 
 @implementation keyboardHelper 
 @synthesize callbackID ; 
 
  - （void）showKeyboard：（NSMutableArray *）arguments withDict：（NSMutableDictionary *）options {
 self.callbackID = [arguments pop]; 
 
 //从webview获取文本字段坐标。 - 你应该在webview加载后这样做
 // myCustomDiv是一个在包含textField的html中的div。 
 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 
 {
 //这里你创建对服务器的请求
 return NO; 
} 
 
  - （BOOL）textFieldDidEndEditing：（UITextField *）textField 
 {
 //这里你创建你对服务器的请求
 return NO; 
} 
 
 @end 
  

em>

  var keyboardHelper = {
 showKeyboard：function（types，success，fail）{
 return Cordova.exec（success，fail，keyboardHelper，showKeyboard，types）; 
} 
}; 
  

解决方案

您可以使用javascript获取输入字段的坐标在webView上。然后，将自己的textField放在它的顶部，并在其委托方法中。textFieldShouldReturn使用用户键入的代码向服务器发送请求。

  //从webview获取文本字段坐标。 - 你应该在webview加载后这样做
 // myCustomDiv是一个在包含textField的html中的div。 
 int textFieldContainerHeightOutput = [[webView stringByEvaluatingJavaScriptFromString：@document.getElementById（\myCustomDiv\）。offsetHeight;] intValue]; 
 
 int textFieldContainerWidthOutput = [[webView stringByEvaluatingJavaScriptFromString：@document.getElementById（\myCustomDiv\）。offsetWidth;] intValue]; 
 
 int textFieldContainerYOffset = [[webView stringByEvaluatingJavaScriptFromString：@document.getElementById（\myCustomDiv\）。offsetTop;] intValue]; 
 
 int textFieldContainerXOffset = [[webView stringByEvaluatingJavaScriptFromString：@document.getElementById（\myCustomDiv\）。offsetLeft;] intValue]; 
 
 myTextField.frame = CGRectMake（textFieldContainerXOffset，textFieldContainerYOffset，textFieldContainerWidthOutput，textFieldContainerHeightOutput）; 
 [webView addSubview：myTextField]; 
 myTextField.delegate = self; 
  

然后你实现textFieldShouldReturn，并向服务器创建你的请求。

   - （BOOL）textFieldShouldReturn：（UITextField *）textField 
 {
 //请求到服务器
 return NO; 
} 
  

这是在现有项目中完成的，但不使用PhoneGap。

要移除文本字段，您可以隐藏

。

<$> p $ p> myTextField.hidden = YES;


或

  myTextField = nil; 
  

或

  [myTextField removeFromSuperView]; 
  

I've been searching far and long, and to this moment, I did not come across a working solution for PhoneGap / Cordova applications that would show soft keyboard programmatically.

Scenario:

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.

Problem:

When the code dialog is shown, the input box is focused using JavaScript. 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.

What we tried:

• creating a hidden text box and making it first responder
• making the actual webview a first responder once the input receives focus via JavaScript
• using sendActionsForControlEvents 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)

Any ideas?

---

EDIT: The restriction mentioned in this question is for built-in browsers only... if you're aiming Opera, you will be successful by using the following code:

var e = jQuery.Event("keydown", { keyCode: 37 });
$('#element').focus().trigger(e);

---

EDIT2: This is a final working PhoneGap code that can be used in a plugin:

keyboardhelper.h

//
//  keyboardHelper.h
//  soft keyboard displaying plugin for PhoneGap
//
//  Copyright 2012 Martin Ambrus.
//

#import <Foundation/Foundation.h>
#ifdef CORDOVA_FRAMEWORK
#import <Cordova/CDVPlugin.h>
#else
#import "CDVPlugin.h"
#endif

@interface keyboardHelper : CDVPlugin {
    NSString *callbackID;
}

@property (nonatomic, copy) NSString *callbackID;

- (void)showKeyboard:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;

@end

keyboardhelper.m

//
//  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

javascript

var keyboardHelper = {
    showKeyboard: function(types, success, fail) {
        return Cordova.exec(success, fail, "keyboardHelper", "showKeyboard", types);
    }
};

解决方案

You can get the coordinates for the input field using javascript on the webView. Then, place your own textField right on top of it and in it's delegate method textFieldShouldReturn send a request to the server with the code the user typed in.

    //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 = [[webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"myCustomDiv\").offsetHeight;"] intValue];

int textFieldContainerWidthOutput = [[webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"myCustomDiv\").offsetWidth;"] intValue];

int textFieldContainerYOffset = [[webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"myCustomDiv\").offsetTop;"] intValue];

int textFieldContainerXOffset = [[webView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"myCustomDiv\").offsetLeft;"] intValue];

myTextField.frame = CGRectMake(textFieldContainerXOffset, textFieldContainerYOffset, textFieldContainerWidthOutput, textFieldContainerHeightOutput);
[webView addSubview:myTextField];
myTextField.delegate = self;

Then you implement textFieldShouldReturn and create your request to the server there.

-(BOOL)textFieldShouldReturn:(UITextField *)textField
{
//here you create your request to the server
return NO;
}

This is done in existing project, however without using PhoneGap. I hope you can adapt it to suit your needs.

To remove the text field, you can hide it

myTextField.hidden = YES;

or

myTextField = nil;

or

[myTextField removeFromSuperView];

这篇关于在PhoneGap应用程序中以编程方式显示iPhone上的软键盘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！