IOS：如何检测用户在内容可编辑div中的UIWebView上更改文本

When using a UIWebView with editable content, the user can type their own text on the editable DIV.

使用带有可编辑内容的UIWebView时，用户可以在可编辑的DIV上键入自己的文本。

Is there a way to fire an event on the ViewController every time the user changes the editable text (similar to the UITextField value change event)?

每次用户更改可编辑文本时，是否有办法在ViewController上触发事件（类似于UITextField值更改事件）？

The ViewController needs to know when the user has changed to the text for two reasons; to know if the user entered any text at all, and to resize the UIWebView as the content text grows.

ViewController需要知道用户何时更改为文本有两个原因;了解用户是否输入了任何文本，并在内容文本增长时调整UIWebView的大小。

The UIWebView delegate doesn't seem to include this type of event. This will probably have to be done via Javascript but can't seem to find the answer out there. Help!

UIWebView委托似乎不包含此类事件。这可能必须通过Javascript完成，但似乎无法找到答案。帮帮我！

2 个解决方案

#1

There is no direct way to listen to events from UIWebView, but you can bridge them. Since iOS7 it is pretty easy as there is JavaScriptCore.framework (you need to link it with project):

没有直接的方法来监听UIWebView中的事件，但您可以桥接它们。从iOS7开始，它很简单，因为有JavaScriptCore.framework（你需要将它与项目链接）：

JSContext *ctx = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
ctx[@"myUpdateCallback"] = ^(JSValue *msg) {
    [self fieldUpdated];
};
[ctx evaluateScript:@"document.getElementById('myEditableDiv').addEventListener('input', myUpdateCallback, false);"];

(I have no possibility at the moment to test the code, but I hope it works)

（我目前无法测试代码，但我希望它有效）

Before iOS7 (if you want to support lower version you have to use this) it was a bit more tricky. You can listen on webView delegate method webView:shouldStartLoadWithRequest:navigationType: for some custom scheme, ex:

在iOS7之前（如果你想支持更低版本，你必须使用它），这有点棘手。你可以监听webView委托方法webView：shouldStartLoadWithRequest：navigationType：对于一些自定义方案，ex：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
        if ([request.URL.scheme isEqualToString:@"divupdated"]) {
            [self fieldUpdated];
            return NO;
        }
        return YES;
}

and fire something like this on webView:

并在webView上触发这样的东西：

[webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('myEditableDiv').addEventListener('change', function () {"
                                                @"var frame = document.createElement('iframe');"
                                                @"frame.src = 'divupdated://something';"
                                                @"document.body.appendChild(frame);"
                                                @"setTimeout(function () { document.body.removeChild(frame); }, 0);"
                                                @"}, false);"];

#2

You need to do some JS hack in order to get this working.

你需要做一些JS黑客才能使这个工作。

First, create a JS file with a script that adds an observer that watch all the editable divs for when they start being edited (I don't know exactly how this should be done in JS, but a quick search on Google should help). The callback should then invoke a specifically crafted url, like:

首先，创建一个带有脚本的JS文件，该脚本添加一个观察者，观察他们开始编辑时所有可编辑的div（我不确切知道如何在JS中完成此操作，但快速搜索Google应该有所帮助）。然后回调应该调用一个特制的URL，如：

textFieldBeginEditing://whateveryoulike

Inject the JS file into the UIWebView. One possible technique:

将JS文件注入UIWebView。一种可能的技术：

- (void)injectJavascript:(NSString *)resource {
    NSString *jsPath = [[NSBundle mainBundle] pathForResource:resource ofType:@"js"];
    NSString *js = [NSString stringWithContentsOfFile:jsPath encoding:NSUTF8StringEncoding error:NULL];

    [self.webView stringByEvaluatingJavaScriptFromString:js];
}

take from another so thread.

从另一个线程中获取。

Finally, in the UIWebViewDelegate method shouldStartLoadingRequest

最后，在UIWebViewDelegate方法中应该执行StartLoadingRequest

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    // ... check the url schema
    NSURL *url = request.URL;
    if ([url.scheme isEqual:@"textFieldBeginEditing"]){
         // here you can handle the event
         return NO; // important
    }
}

#1