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

GWT - Autogrow TextArea

2 个答案: