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

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

您可以选择将占位符文本传递到 TextField 的构造函数，以及可选的初始值。

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

或者调用 setter 和 getter： TextField::setPlaceholder 和 TextField.getPlaceholder。

myTextField.setPlaceholder( "Hint goes here" ) ;

Vaadin 8

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

调用 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");