Leo*_*ica 16 scroll designmode contenteditable uiwebview ios
我正在为我正在处理的iPhone应用程序尝试一个富文本编辑器(具有HTML导出功能),并决定使用iOS 5的WebKit支持contentEditable/ designMode.我已经遇到了一个问题,这个问题正在打破我的需求.在UIWebView中编辑内容时,没有自动滚动跟随光标,例如,在UITextView中.键入时,光标在scrollView下继续,用户必须手动向上滚动.
这是一些相关的代码:
- (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];
}
有任何想法如何解决这个问题？我不确定这是否也发生在Safari或仅在UIWebViewWebKit实现中.
如果您遇到此问题,请务必访问https://bugreport.apple.com并复制rdar:// 16455638.
Luk*_*uke 11
经过几个小时的研究,我发现了一个更好的解决方案,所以我想我会分享.
iOS 5的contentEditable实现中存在一个错误,其中主scrollView不会使用插入符号滚动.如果使body标签(或任何动态大小的元素)contentEditable,则插入符将始终关闭屏幕.
如果你设置一个可编辑的div溢出:滚动,你会注意到div将滚动.div的滚动默认情况下不会"反弹"或滚动条,但您可以将该-webkit-overflow-scrolling: touch属性应用于div来修复此问题.
有了这些信息,您可以使用包装器修复它,如下所示:
<!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>
基本上你是滚动div而不是文档.
不幸的是,div的"scrollView"并不知道虚拟键盘,因此插入符号将在键盘后面消失.但是,您会注意到插入位置仍位于键盘后面的屏幕上.所以要解决这个问题,请减小div/UIWebView的高度以适应键盘.
您可能想要做的其他事情是禁用主scrollView上的滚动:
webView.scrollView.scrollEnabled = NO;
主scrollView不应该滚动,但它应该防止任何滚动故障.
为了回答我自己的问题，我们最终做了很多工作来确保它在多个 iOS 版本上都能正常工作。我们发现所有滚动事件都是由于尝试UIWebView管理其UIWebScrollView. 我们决定不使用 a UIWebView，而是采用内部UIWebDocumentView/UIWebBrowserView并将其添加到我们自己的滚动视图中。这使我们能够自行管理内容大小和滚动，并消除了我们之前遇到的大部分问题。
| 归档时间： |
|
| 查看次数： |
9146 次 |
| 最近记录： |