David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler

    Web app developer since 1994 and Google Cloud Platform Instructor now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 223 other followers

  • Sleepless Nights…

    February 2010
    S M T W T F S
  • Blog Stats

    • 1,029,898 hits

A TextBox with input prompt for GWT

Posted by David Chandler on February 16, 2010

Here’s a nifty GWT widget that displays a prompt in a text box and erases it when you click or type in the text box. It looks simple, but is actually quite clever in design as it is entirely self-contained. Thanks to Geoffrey Wiseman for the inspiration for this.

package com.turbomanage.gwt.client.ui.widget;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.FocusEvent;
import com.google.gwt.event.dom.client.FocusHandler;
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.TextBox;

public class PromptedTextBox extends TextBox implements KeyPressHandler, FocusHandler, ClickHandler
	private String promptText;
	private String promptStyle;

	public PromptedTextBox(String promptText, String promptStyleName)
		this.promptText = promptText;
		this.promptStyle = promptStyleName;

	public void showPrompt()

	public void hidePrompt()

	public void onKeyPress(KeyPressEvent event)
		if (promptText.equals(this.getText())
			&& !(event.getNativeEvent().getKeyCode() == KeyCodes.KEY_TAB))

	public void onFocus(FocusEvent event)

	public void onClick(ClickEvent event)
		if (promptText.equals(this.getText()))

All that’s needed to round it out is a little CSS to lighten up the prompt text:

.prompt {
	color: #999;


7 Responses to “A TextBox with input prompt for GWT”

  1. Flemming said


    I have with great pleasure read you blog for a long time. Thanks for sharing ideas!
    this widget is cool.

    You could even add functionality so when pressing “Esc” the written text would be deleted and the “prompt text” would show up again.

    Just an idea 🙂

    Regards FLemming

  2. Daniel said

    Nice widget! If I understand it correct, the prompt is only shown as initial value in the textbox.
    So when the prompt is hid, you will never show it again.
    Isn’t it an idea to also remove the handlers in hidePrompt() to avoid useless string compares when the user starts typing in the box and the onKeyPress event is triggered all the time?

    • perwiklander said

      @Daniel: It migth be an idea to return the box to its initial state if the user clears the content of the box. This could be important if this kind of box is used without a label as they often are when used as search or login/password boxes. In those two cases it might be obvioud what the labels were before you started typing but try using them in a form with let’s say five identical text fields. Even I as the developer get confused there.

  3. perwiklander said

    This looks good!

    I’ll consider this an early birthday present 🙂 (28 tomorrow)

    Thanks David (and Geoffrey Wiseman)!

  4. JP said

    I was wondering if stealing the code off your blog is:

    1) Immoral
    2) Illegal
    3) Just fine.

    Fine blog, BTW. I almost stole your EnumListBox, but then realized we had (almost) identical implementations, so I kept mine. 🙂

    • JP, the code I post here is free for the taking. Thanks for asking. I really should put a license statement on it with the usual disclaimers. I’m glad you’ve enjoyed the blog.

  5. Glenn said

    Nice post. If you add an @UiConstructor declaration on the constructor then you can use this in ui.xml:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: