添加提示到TextField

Question

我想在用户输入文本之前添加一个带有集成提示文本，用户提示符和占位符的TextField。当TextField聚焦时，提示文本消失，如果TextField失去焦点且没有输入文本，则重新显示。

我最初认为这将是Vaadin TextFields的通用功能，但似乎并非如此。现在我正在寻找一种方法来实现我自己的TextField扩展来添加这个功能。但是我被困住了。

我的问题是，如果此前有人这样做过，或者本能地知道应该怎么做？

这是我走了多远：

package com.smarttrust.m2m.gui.admin;

import com.vaadin.event.FieldEvents.FocusEvent;
import com.vaadin.event.FieldEvents.FocusListener;
import com.vaadin.terminal.gwt.client.ui.VCalendarPanel.FocusChangeListener;
import com.vaadin.ui.TextField;

public class M2MHintTextField extends TextField implements FocusListener    {

    private final String hint;

    FocusListener listener = new FocusListener() {

        @Override
        public void focus(FocusEvent event) {
            // TODO Auto-generated method stub

        }
    };

    public M2MHintTextField(final String hint)    {
        super(hint);
        this.hint = hint;
        super.addListener(this.listener);
    }

    @Override
    public void focus(FocusEvent event) {
        // TODO Auto-generated method stub

    }
}

Answer 1

内置功能

经过一番研究后，我发现这是所有输入控件（TextField，TextArea，DateField，ComboBox）中的集成功能。

Vaadin Flow（Vaadin 10）

该功能是名为占位符的属性。

您可以选择将占位符文本和可选的初始值一起传递给constructor of TextField。

new TextField( "label goes here" , "hint goes here" ) 

或致电setter and getter：TextField::setPlaceholder和TextField.getPlaceholder。

myTextField.setPlaceholder( "Hint goes here" ) ;

Vaadin 8

该功能是名为占位符的属性。

调用getter / setter方法：TextField::getPlaceholder和TextField.setPlaceholder。

myTextField.setPlaceholder( "Hint goes here" ) ;

Vaadin 7

该功能是一个名为 InputPrompt 的属性。

调用getter / setter方法：TextField::setInputPrompt和TextField::getInputPrompt。

myTextField.setInputPrompt("Hint goes here");