UIWebView with contentEditable (html editing), first responder handling?

Here is how I overwrite these methods in a UIWebView subclass (content is the id of the editable element):

-(BOOL)resignFirstResponder {
    [self setUserInteractionEnabled:NO];[self setUserInteractionEnabled:YES];
    return [super resignFirstResponder];
}

// only works on iOS 6+
-(void)becomeFirstResponder {
    self.keyboardDisplayRequiresUserAction = NO; // set here or during initialization  
    // important note: in some situations (newer iOS versions), it is also required to first call `blur()` on the 'content' element, otherwise the keyboard won't show up as expected
    [self stringByEvaluatingJavaScriptFromString:@"document.getElementById('content').focus()"];
}

-(BOOL)isFirstResponder{
    if ([[self stringByEvaluatingJavaScriptFromString:@"document.activeElement.id=='content'"] isEqualToString:@"true"]) {
        return YES;
    }
    else {
        return NO;
    }
}

isFirstResponder will only return true after the keyboard is shown (e.g, it will return false at UIKeyboardWillShowNotification)

In case this is an issue, another way to check if the UIWebView is the first responder is as follows:

+(BOOL)isFirstResponder:(UIView *)v{
    for (UIView *vs in v.subviews) {
        if ([vs isFirstResponder] || [self isFirstResponder:vs]) {
            return YES;
        }
    }
    return NO;
}
-(BOOL)isFirstResponder{
    return [[self class] isFirstResponder:self];
}

This way, the returned value will be YES even before/after the keyboard animation finishes (showing or hiding).


I met the same problem recently, but solved it using pure JavaScript. Actually it doesn't need any Objective-C First Responder related methods. I just used the JavaScript to change the UIWebView's content - the targeting HTML element's contentEditable attribute value according to the requirement.

For example, using the following code to hide the Keyboard that called by the UIWebView's editable content:

[webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('target').setAttribute('contentEditable','false')"];

Hope this is helpful. :)