Automatic scrolling when contentEditable/designMode in a UIWebView
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.
Answer
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.