2010-03-09 61 views
4

我打电话给com.google.gwt.user.client.ui.TextArea.setText(myText)来设置内容。之后,我拨打setCursorPosition(myText.length())将光标移到最后。这很好。如何滚动GWT TextArea?

myText有更多的行,那么文本区域可以立即显示,它会显示一个滚动条。但它不滚动到光标位置。更糟 - 它滚动到顶部。

如何将GWT TextArea滚动到光标位置?我真的需要光标位置,而不是TextArea的底部。 JSNI解决方法也可以。

回答

3

我有一个场景,textarea已经有了一些东西,当一个新的命令被提交时,它会将数据添加到它并滚动到新添加的数据的开始。这是我做过什么

// Hold the previous height to set the scroll. 
    final int prevHeight = document.get().getElementById(textareadid).getScrollHeight(); 
    // Hold the prev position if output area already has some data. 
    final int prevPos = this.textArea.getValue() != null ? 
    this.textArea.getValue().length() : 0; 

处理后,并设置新的数据

 int posCount = 0; 
     if (previousResponse != null && !previousResponse.isEmpty()) 
     { 
      final String dataStr = "new data from process"; 
      // add 15 lines for the cursor position 
      posCount = getRelativeCount(dataStr); 
     } 
     this.textArea.getElement().setScrollTop(prevHeight); 
     this.textArea.setCursorPos(prevPos + posCount); 

private int getRelativeCount(final String str) 
{ 
    int charCount = 0; 

    if (str != null) 
    { 

     int NUM_ROWS = 15; 

     if (getUserAgent().contains("msie")) 
     { 
      NUM_ROWS = 16; 
     } 

     final String[] splitArr = str.split("\n"); // split on the new line 
                // char 

     for (int index = 0; index < splitArr.length && index < NUM_ROWS; index++) 
     { 
      charCount += splitArr[index].length(); 
     } 
    } 
    return charCount; 
} 
3

尝试设置光标位置之后加入此:

textAreaToScroll.getElement().setScrollTop(textAreaToScroll.getElement().getScrollHeight()); 

这将在元件滚动到底部。

编辑:

要滚动至任何光标位置存在(据我所知)没有简单的方法来做到这一点。我不认为有什么办法可以问光标所在的浏览器。 我刚刚想到了一些可能有用的事情(还没有真正测试过)来猜测滚动需要多长时间的粗略估计。

int cursorPos = textAreaToScroll.getCursorPos(); 
long offsetRatio = cursorPos/textAreaToScroll.getText().length(); 
//gives 0.0 to 1.0 
offsetRatio += someMagicNumber; // -0.1 maybe? 
// Depending on the font you may need to adjust the magic number 
// to adjust the ratio if it scrolls to far or to short. 
offsetRatio = offsetRatio>0.0 ? offsetRatio : 0; //make sure 
//we don't get negative ratios 
//(negative values may crash some browsers while others ignore it) 
textAreaToScroll.getElement().setScrollTop(
    textAreaToScroll.getElement().getScrollHeight() * offsetRatio); 

这可以滚动大致所需的距离。请注意,这假定每行都被填充大约相同的数量,因为它使用光标位置除以文本的长度而不是行数(这很难计算)。手动换行会扭曲这一估计,而比例字体也会使其不太准确。

您可能需要调整比率,以使其滚动得太短而不是太远,因为如果光标稍微低于文本区域的顶部,光标仍然可见。正如我所说我没有真正测试过这一点,我可能已经颠倒了逻辑和其他微妙的错误。

+0

此代码将TextArea滚动到底部,不幸的是不会移动到光标位置:-( – Witek 2010-03-11 11:11:39

+0

如果将光标设置到最后,它不会在底部? – 2010-03-12 10:53:35

+0

我需要一个解决方案,其中TextArea滚动到光标的位置,而不是结束。示例:TextArea有5行高度。其文字内容为50行。光标位于第25行。我想要一个方法scrollToCursorPosition(),它可以滚动到第25行,而不是第50行。 – Witek 2010-03-19 09:28:45

1

为了改善斯坦的答案,你可以指望在文本行数,然后基于顶部位置在总行的所需行上,而不是使用字符。

当你计算行,你还必须确定哪些行的光标是在

String text = textArea.getText(); 
int lines = 1; 
int pos = 0; 
int cursorPos = ...; 
int cursorLine = -1; 
while((pos = 1+text.indexOf("\n", pos)) > 0) 
{ 
    if (cursorLine == -1 && pos > cursorPos) 
     cursorLine = lines; 
    lines++; 
} 
if (lines > 0 && cursorLine > 0 && cursorLine < lines) 
{ 
    int scroll = textArea.getElement().getScrollHeight(); 
    scroll *= cursorLine; 
    scroll /= lines; 
    scroll -= 30; // Back up a bit so it's not right at the top 
    if (scroll < 0) 
     scroll = 0; 
    textArea.getElement().setScrollTop(scroll); 
}