Automatic scrolling when contentEditable/designMode in a UIWebView

StackOverflow https://stackoverflow.com/questions/8523232

Question

I am attempting a rich-text editor (with HTML export capability) for an iPhone application I am working on, and decided to use iOS 5's WebKit support for contentEditable/designMode. I have hit a wall with one issue which is breaking for what I need. When editing the content in the UIWebView, there is no automatic scrolling to follow the cursor, like, for example, in UITextView. When typing, the cursor continues under the scrollView and the user has to manually scroll up.

Here is some relevant code:

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSString *string = @"document.body.contentEditable=true;document.designMode='on';void(0)";
    [webView stringByEvaluatingJavaScriptFromString:string];

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
}

Any ideas how to remedy this issue? I am not sure if this also occurs in Safari or only in UIWebView's WebKit implementation.

If you hit this problem, make sure to head over to https://bugreport.apple.com and duplicate rdar://16455638.

Was it helpful?

Solution 2

To answer my own question, we eventually ended up doing a lot of work to ensure this works correctly across multiple iOS versions. We found out that all the scroll events were due to the UIWebView trying to manage its UIWebScrollView. We decided instead of using a UIWebView, we would take the internal UIWebDocumentView/UIWebBrowserView and add it to our own scroll view. This allowed us to managed the content size and scrolling ourselves and removed most of the problems we previously experienced.

OTHER TIPS

After hours of research I found a better solution, so I thought I'd share.

There is a bug in iOS 5's contentEditable implementation where the main scrollView will not scroll with the caret. If making the body tag (or any dynamically sized element) contentEditable, the caret will always go off screen.

If you set an editable div to overflow: scroll, you'll notice that the div will scroll. The div's scrolling doesn't "bounce" or have scroll bars by default, but you can apply the -webkit-overflow-scrolling: touch attribute to the div to fix this.

With this information, you can fix it with a wrapper like so:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
<style type="text/css">
    html, body {height: 100%;}
    body {
        margin: 0;
    }
    #wrap {
        height: 100%;
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    #editor {
        padding: 10px;
    }
</style>
</head>
<body>
<div id="wrap">
    <div id="editor" contenteditable="true">

    </div>
</div>
</body>
</html>

Basically you are scrolling the div instead of the document.

Unfortuantly the div's "scrollView" isn't aware of the virtual keyboard, so the caret will disappear behind the keyboard. However, you'll notice that the caret position is still on screen at the bottom behind the keyboard. So to fix that, reduce the height of the div/UIWebView to accommodate the keyboard.

Something else you might want to do is disable scrolling on the main scrollView:

webView.scrollView.scrollEnabled = NO;

The main scrollView shouldn't scroll anyway, but it should prevent any scrolling glitches.

First You have to register keyboard notifications, and in that keyboardWillShow method, trigger a scroll method with 0.1 timer interval. 

 -(void) keyboardWillShow:(NSNotification *)note
    {

        timer   =   [NSTimer    scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(scroll) userInfo:nil repeats:YES];

    }

    -(void) keyboardWillHide:(NSNotification *)note
    {
        [timer invalidate];

    }

Make one member variable in the .h file and and allocate memory for it in init() method.

  NSString    *prevStr;

inside that scroll method, do the following.

-(void)scroll{

    if (![prevStr isEqualToString:[WebView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"]]) {
        prevStr  =   [[WebView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"] retain];
        NSInteger height = [[WebView stringByEvaluatingJavaScriptFromString:@"document.body.offsetHeight;"] intValue];
        NSString* javascript = [NSString stringWithFormat:@"window.scrollBy(0, %d);", height];   
        [WebView stringByEvaluatingJavaScriptFromString:javascript];   
    }

}

This will allow you to scroll to the bottom when you are editing the content and the content is larger than the WebView frame. And at other times you will be able to scroll to the top of the page(autoscroll will be put hold at that time).

I couldn't do your trick of setting "overflow: scroll" since it messed up our already good css (if we changed the overflow when clicking the editable div, then the layout got messed up). Went with this:

$(this).on('keypress',function(e){
    //$(this) is the contenteditable div
    var lineHeight = parseInt($(this).css('line-height')) + 2;
    //gets the height of the div        
    newh=$(this).height();
    if (typeof oldh === 'undefined')
        oldh=newh;//saves the current height
    if(oldh!=newh)//checks if the height changes
    {
        //if height changes, scroll up by 1 line (plus a little 2 px)            
        window.scrollBy(0,lineHeight);
        oldh=newh;//resave the saved height since it changed
    }
});

Hope this helps someone. PITA

You can try to get caret frame with little bit tricky hack and manually scroll to visible rect.

// Call this after every change in editable HTML document
func bodyDidChanged() {
    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
        let caretRect = self.caretRect(inView: self.webView)
        self.webView.scrollView.scrollRectToVisible(caretRect.insetBy(dx: -2, dy: -2), animated: true)
    }
}

private func caretRect(inView parentView: UIView? ) -> CGRect {
    guard let parentView = parentView else {
        return CGRect.null
    }

    var rect: CGRect?
    for view in parentView.subviews {
        if view.isKind(of: NSClassFromString("UITextSelectionView")!) {
            // If have a selected text, then we seeking last blue dot (grabber) inside rangeView
            var rangeView = view.subviews.first?.subviews.last
            if rangeView == nil {
                // If text not selected then carret frame is same as rangeView frame
                rangeView = view.subviews.first
            }
            rect = rangeView?.frame
            break
        } else {
            rect = caretRect(inView: view)
            if let rect = rect, !rect.isNull {
                break
            }
        }
    }
    return rect ?? CGRect.null
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top