Is there a JQuery plugin for displaying default text in a text field?

Question

When I hit the page, the text box says "Search...", in gray font.

Then, I click the textbox. Then, the "search..." disappears. And I can type.

I rephrased your question because it's not useful for anyone searching for the same answer later. — Soviut, Dec 14 '10 at 06:49

score 3 · Accepted Answer · answered Dec 14 '10 at 06:40

3

What you're looking for is called a watermark effect. You can find appropriate jQuery plugins here.

answered Dec 14 '10 at 06:40

Frédéric Hamidi

258,201
41
486
479

disagree. Couldn't you just have grey text inside the textbox and use a focus event to clear the text? Looks to me like he is referring to something identical to the search box right here on SO. When you click on it the word 'search' disappears ;) – Matt Phillips Dec 14 '10 at 06:41
@Matt, sure you can, but questioner is asking for a jQuery plugin :) Also, the effect you mention (SO search box) is really called a watermark. See [here](http://stackoverflow.com/questions/833943/watermark-textbox-in-wpf), for instance. – Frédéric Hamidi Dec 14 '10 at 06:42
Understandable...but that looks like an awful lot of effort for something that can be solved with 2 jquery statements and some css no? – Matt Phillips Dec 14 '10 at 06:48
@Matt, probably, although there are more complex watermark plugins that restore the default text when the input field loses focus but is still empty. So I suppose that depends on the feature level you want :) – Frédéric Hamidi Dec 14 '10 at 06:53
It is not something that is solved with 2 statements. I made my own plugin and had some issues. First, every input needs its own handling (because different text) but that part is easy. Then you have to apply css (addClass -> simple). Then you have to ignore input fields which already have a value in order to not override valid data. Then, you have to clear input fields of the watermark unless you want the text to become valid data that is sent to the server. There is a lot going on. – Mike Dec 14 '10 at 07:52

Soviut · Answer 2 · 2010-12-14T07:24:54.000

This is typically called "default text" and yes, there's a plugin for it.

JQuery Default Text Plugin

I've tried rolling my own default text plugin before but there were a lot of edge cases to contend with. For example, the plugin must know what its default text is in order to clear said default text if the text field is left "blank", otherwise the form will try to submit that default text. Basically, what I'm saying is use the plugin as it should cover these edge cases for you.

score 0 · Answer 3 · answered Dec 14 '10 at 07:58

I offer my own solution to this: http://tholljos.lu/mike/files/watermark.zip

jQuery(selector).watermark('here be text...','cssClass');

'here be text' will be your watermark text. 'cssClass' is a css class that is added to the input field in order to style the watermark text.

AFAIAC this covers pretty much every edge case I have encountered so far. Of course, you can use the other plugins if you want, but I find my solution simple and effective.

score -1 · Answer 4 · answered Dec 14 '10 at 06:46

-1

$("textinput_id").focus(function(){
    $(this).text("");
    });

$("textinput_id").blur(function(){
    $(this).text("Search...");
    });

answered Dec 14 '10 at 06:46

Matt Phillips

11,249
10
46
71

This doesn't cover all the edge cases. First of all, it won't display by default, second when you submit the form it will submit the default text, you must clear this from the form before submitting, and to do that you'll need to know the default text at the beginning. – Soviut Dec 14 '10 at 07:00

Is there a JQuery plugin for displaying default text in a text field?

4 Answers4