Question

I want to add a TextField with an integrated hint text, a user prompt, a placeholder until the user enters text. The prompt text disappears when the TextField is focused and re-appears if the TextField loses focus and no text is entered.

I initially thought that this would be a generic feature for Vaadin TextFields but that doesn’t seem to be the case. Now I’m looking for a way to implement my own extension of the TextField to add this feature. But I’m stuck.

My question is if anyone here has done this before or instinctively know how it should be done?

This is how far I’ve come:

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

Built-in feature

After some research I found that this is an integrated feature in all of the input controls (TextField, TextArea, DateField, ComboBox).

Vaadin Flow (Vaadin 10)

The feature is a property called Placeholder.

You can optionally pass the placeholder text to the constructor of TextField, along with optional initial value.

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

Or call the setter and getter: TextField::setPlaceholder and TextField.getPlaceholder.

myTextField.setPlaceholder( "Hint goes here" ) ;

Vaadin 8

The feature is a property called Placeholder.

Call the getter/setter methods: TextField::getPlaceholder and TextField.setPlaceholder.

myTextField.setPlaceholder( "Hint goes here" ) ;

Vaadin 7

The feature is a property called InputPrompt.

Call the getter/setter methods: TextField::setInputPrompt and TextField::getInputPrompt.

myTextField.setInputPrompt("Hint goes here");