Default value in empty TextBox

[Brock Parker]

Hello,

Is there anything built into GWT to display a value in a TextBox if
the field is emtpy? This value would disappear once the user clicked
in the field and started typing. I have seen this functionality on
several Google web pages (i.e. the Contacts page in GMail) but I can't
find anything in the documentation or samples about it.

Thanks,

Brock

[Sean]

You could probably use a focus listener and onFocus clear the text,
onLostFocus put it back to it's default.

[Sean]

I thought this would be a nice thing to have in my toolbox so I made
one. This works just like the Gmail Contacts text box. You can edit it
and do what you see fit to get it to work how you like:

public class DefaultTextBox extends TextBox implements FocusListener {
private String defaultText;

public DefaultTextBox(String defText) {
defaultText = defText;
setText(defaultText);
addFocusListener(this);
}

public void setDefaultText(String defText) {
defaultText = defText;
}

public String getDefaultText() {
return defaultText;
}

public void onFocus(Widget sender) {
this.setText("");

}

public void onLostFocus(Widget sender) {
this.setText(defaultText);
}

}

I instantiated it like:
DefaultTextBox tb = new DefaultTextBox("Search, add, or invite.");

[Brock Parker]

Thanks Sean, that's what I was planning to do myself if nobody else
came up with anything.

[Jason Essington]

I usually do something similar, but additionally add a styleName to
the box that allows the default text to be styled in a way that is
visually different from user entered text (gray vs black for instance)
and clear that style when the user begins typing in the field.

-jason

[Peter Blazejewicz]

hi Brock,
that could be done only with JavaScript (as in exampel), there is no
default value attr or property for text inputs:
http://www.w3schools.com/tags/tag_input.asp

regards,
Peter

[Christopher]

Thanks for the code. Here's my extension of it:

public class DefaultTextBox extends TextBox implements FocusListener {

String defaultText;
boolean defaultTextMode = false;

public DefaultTextBox(String defaultText) {
setDefaultText(defaultText);
setDefaultTextMode();
addFocusListener(this);

}

public String getDefaultText() {
return defaultText;
}

public String getText() {
if (!defaultTextMode) {
return super.getText();
} else {
return "";
}
}

public void onFocus(Widget sender) {
if (defaultTextMode) {
setNormalTextMode();
}
}

public void onLostFocus(Widget sender) {
if (getText().length() == 0) {
setDefaultTextMode();
}
}

public void setDefaultText(String defaultText) {
this.defaultText = defaultText;
if (defaultTextMode) {
setDefaultTextMode(); // Refresh
}
}

void setDefaultTextMode() {
assert super.getText().length() == 0;
super.setText(defaultText);
addStyleDependentName("default");
defaultTextMode = true;
}

void setNormalTextMode() {
assert super.getText().length() != 0;
super.setText("");
removeStyleDependentName("default");
defaultTextMode = false;
}

public void setText(String text) {
super.setText(text);
if (text.length() == 0) {
setDefaultTextMode();
} else {
setNormalTextMode();
}
}
}

Cheers,
-C

[Zied Hamdi]

Hi all,

There is ready version (among other widgets) in the buttom of this page 

http://1vu-widgets.appspot.com/IntoGwt.html

The project homepage is https://code.google.com/p/advanced-suggest-select-box/

Best regards

[Moutellou]

You can try the attribute placeholder.

getElement().setPropertyString("placeholder", "default value")

[Ismael Hasan]

Kudos for Moutellou, I find his solution very clean.

HTML already provides the capability to fulfil the initial requirement, so I think it is best taking advantage of that instead of dealing with more GWT artifacts and re-building a functionality that already exists.