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

问题描述

我已经搜索了很长时间，直到现在，我还没有遇到一个可以以编程方式显示软键盘的 PhoneGap/Cordova 应用程序的有效解决方案.

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.

场景:

我们有一个 PhoneGap 应用程序 - 一个在 jQuery Mobile 中创建的网站 - 它曾经向用户显示一个对话框.该对话框也是一个网页，只有一个 INPUT 文本框，用户应在其中输入代码.

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.

问题:

显示代码对话框时，输入框使用 JavaScript 聚焦.但是，由于 iPhone 内部浏览器的限制，软键盘直到用户真正在输入文本框内真正点击后才会出现.

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.

我们的尝试:

• 创建隐藏文本框 并使其成为第一响应者
• 一旦输入通过 JavaScript 获得焦点，就使实际的 webview 成为第一响应者
• 使用 sendActionsForControlEvents 尝试将 Touch 事件传递到 web 视图(尽管如果有人有 PhoneGap 应用程序的工作代码，如果他们可以共享，我将不胜感激，因为我不是 iOS 编码专业人士)

有什么想法吗?

此问题中提到的限制仅适用于内置浏览器...如果您的目标是 Opera，则使用以下代码将成功:

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);

<小时>

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

---

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);
    }
};

推荐答案

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

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;

然后您实现 textFieldShouldReturn 并创建您对服务器的请求.

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;
}

这是在现有项目中完成的，但不使用 PhoneGap.我希望您可以调整它以满足您的需求.

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;

或

myTextField = nil;

或

[myTextField removeFromSuperView];

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