GWT - Autogrow TextArea

Question

这是我尝试制作TextArea自动增长的代码：

textArea.addKeyPressHandler(new KeyPressHandler() {
            @Override
            public void onKeyPress(KeyPressEvent event) {
                int lines = 0;
                final String s = textArea.getText();
                for(int i = 0; i != -1; i = s.indexOf("\n", i + 1)) {
                    lines++;
                }
                if (((int)event.getCharCode()) == 13) {  // User hit "Enter" key
                    lines++;
                }
                if(textArea.getVisibleLines() < lines) {
                    textArea.setVisibleLines(lines);
                }
            }
        });

然而，这根本不起作用。

我需要的是

• 在用户输入更多文字行时增加TextArea（高度）
• 将TextArea作为用户删除行重新连接
• 还应该能够处理＆＃34; CTRL + V＆＃34;并粘贴文字事件

鉴于TextArea最初已使用默认高度和宽度进行渲染。 此外，如果文本超出宽度，则应显示向左，向右滚动条。

Answer 1

以下是解决方案：

• 在用户输入更多文字行时增加TextArea（高度）

• 将TextArea作为用户删除行重新连接

  import com.google.gwt.core.client.EntryPoint;
  import com.google.gwt.dom.client.Style.Overflow;
  import com.google.gwt.event.dom.client.ChangeEvent;
  import com.google.gwt.event.dom.client.ChangeHandler;
  import com.google.gwt.event.dom.client.KeyCodes;
  import com.google.gwt.event.dom.client.KeyPressEvent;
  import com.google.gwt.event.dom.client.KeyPressHandler;
  import com.google.gwt.user.client.ui.RootPanel;
  import com.google.gwt.user.client.ui.TextArea;
  
  public void onModuleLoad() {
      final TextArea textArea=new TextArea();
      textArea.setStyleName("textboxStyle");
      textArea.getElement().getStyle().setOverflow(Overflow.AUTO);
      textArea.getElement().setAttribute("wrap","off");
  
      textArea.setVisibleLines(1);
  
      textArea.addChangeHandler(new ChangeHandler() {
  
          @Override
          public void onChange(ChangeEvent event) {
              System.out.println("Value changed");
          }
      });
  
      textArea.addKeyPressHandler(new KeyPressHandler() {
          @Override
          public void onKeyPress(KeyPressEvent event) {
              int lines = 0;
              final String s = textArea.getText();
              for (int i = 0; i != -1; i = s.indexOf("\n", i + 1)) {
                  lines++;
              }
  
              if (event.getNativeEvent().getKeyCode() == KeyCodes.KEY_ENTER) { // User hit "Enter"
                  // key
                  lines++;
              }
              textArea.setVisibleLines(lines);
          }
      });
      RootPanel.get().add(textArea);
  }
  

• 还应该能够处理“CTRL + V”并粘贴文本事件

  是的，您可以使用addChangeHandler方法

  来处理它

  textArea.addChangeHandler(new ChangeHandler() {
  
      @Override
      public void onChange(ChangeEvent event) {
          System.out.println("Value changed");
      }
  });
  

• 如果文字超出宽度，则应显示向左滚动，向右滚动。

  textArea.getElement().setAttribute("wrap","off");
  

• css已应用

  .textboxStyle{
      font-family: sans-serif;
      font-size: 12px;
      font-weight: normal;
  }
  

• screeenshots

Answer 2

我正在使用这种方法做类似的事情。

textArea.setVisibleLines(1);
textArea.addKeyUpHandler(new KeyUpHandler()
{
    @Override
    public void onKeyUp(KeyUpEvent event)
    {
       textArea.setHeight("auto");
       textArea.setHeight(textArea.getElement().getScrollHeight() + "px");
    }
});

我也在应用这些风格以满足我的需求

.textArea {
    resize: none;
    overflow: hidden;
}