ios – 在UIWebView中的contentEditabledesignMode时自动滚动_app

概述我正在为我正在开发的iPhone应用程序尝试一个富文本编辑器(具有 HTML导出功能),并决定使用iOS 5的WebKit支持contentEditable / designMode. 我遇到了一个问题,打破了我所需要的一切.在UIWebView中编辑内容时,没有自动滚动来跟随游标,例如在UITextView中.键入时,光标继续在scrollView下方,用户必须手动向上滚动. 这是一些相关的代码我正在为我正在开发的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的滚动不会“反d”或滚动条,但可以将-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上滚动：