Menu
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.
965
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.
113
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.
26
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).
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
