GWT - 自动增长TextArea [英] GWT - Autogrow TextArea

问题描述

  textArea.addKeyPressHandler（new KeyPressHandler（）{$ b）这是我的代码，我试图创建一个TextArea自动增长。 $ b @Override $ b $ public void onKeyPress（KeyPressEvent event）{
 int lines = 0; 
 final String s = textArea.getText（）; 
 for（int i = 0; （（（int）event.getCharCode（））;如果（（（int）event.getCharCode（） ）== 13）{//用户点击Enter键
行++; 
} 
 if（textArea.getVisibleLines（） textArea.setVisibleLines（lines ）; 
} 
} 
}）; 
  

然而这根本不起作用。

我需要的是

• 以用户放入TextArea（高度）更多文本行


• 将TextArea缩小为用户删除行


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

给定的比TextArea最初使用默认的高度和宽度进行渲染。
此外，如果文字超出宽度，则会显示左侧滚动条和右侧滚动条。

解决方案

以下是解决方案：

• 在用户放置更多文本行的情况下增加TextArea（高度）
  
  $ p> 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（值改变）;
}
}）;

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）{//用户点击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
  
  
  

Here's my code where I tried to make a TextArea autogrow:

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

However this does not work at all.

What I need is

• Grow the TextArea (height) as user put more text lines
• Shink the TextArea as user remove lines
• Should also be able to handle "CTRL + V" and paste text event

Given than the TextArea have been rendered with default height and width initially. Also if the text exceeds the width, a scroll left, right bar should show up.

解决方案

Here is the solutions:

• Grow the TextArea (height) as user put more text lines

• Shink the TextArea as user remove lines

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

• Should also be able to handle "CTRL + V" and paste text event

  Yes you can handle it using addChangeHandler method

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

• if the text exceeds the width, a scroll left, right bar should show up.

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

• css applied

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

• screeenshots

这篇关于GWT - 自动增长TextArea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！