ios – 在UIWebView中的contentEditable / designMode时自动滚动

我正在为我正在开发的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或仅在UIWebView的WebKit实现中.

如果您遇到这个问题,请确保前往https://bugreport.apple.com并复制rdar：// 16455638.

解决方法

经过几个小时的研究,我找到了一个更好的解决方案,所以我以为我会分享.

在iOS 5的contentEditable实现中有一个bug,其中scrollView不会用插入符滚动.如果使body body(或任何动态大小的元素)contentEditable,插入符号将始终关闭屏幕.

如果将可编辑的div设置为overflow：滚动,则会注意到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中的contentEditable / designMode时自动滚动

解决方法

相关文章