如何滚动GWT TextArea？

问题描述：

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

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

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

答

我有一个场景，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; 
}

答

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

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);

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

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

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

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

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

答

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

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

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); 
}

答

这个工作对我来说： GWT textarea的滚动已发行

http://www.gwtplayground.com/2012/08/gwt-textarea-scroll-issue_21.html

如何滚动GWT TextArea？

相关推荐