How do I implement that “help text” thing like the stackoverflow quick search has?

Question

this is going to be a total newbie question but I can't really do a google search cos I'm not sure what it's called.

You know that the quick search bar on the top right hand corner in StackOverFlow?

You know how it's got "search" written there, and when you click on it, it goes blank, what's the best way to implement this?

I see the javascript has this in stackoverflow.

onfocus="if (this.value=='search') this.value = ''" value="search"

But if I have a seperate search button, and the user doesn't focus on that search criteria (it's got multiple search criterias), I would need to take the "search" into account.

I would need to do something like

if(textbox1.Text == "search")
{
    textbox1.Text = "";
}

That just seems a bit annoying having to put the text ("search") in 3 places. Twice in the markup and once in the code behind.

Is there another way of doing this?

Answer 1

it's called a placeholder or watermark

in HTML5 it's really easy, you just have to write placeholder="your placeholder" http://diveintohtml5.info/forms.html

otherwise in JavaScript you can do something like this: http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/

Answer 2

The term you're looking for is "placeholder". Other than doing it manually, there's the HTML5 placeholder attribute which is being supported by more browsers as time goes by.

Answer 3

Looks like the SO search does what you did where the onFocus clears the text if the text is search. You can prove this by typing search into that box, click somewhere, then click back in the text box and it is removed. Do the same thing using "test" and it is not removed.

If you do end up implementing it manually make sure you use a constant instead of using "search" in multiple places. Using a constant is less error prone because you won't mis-type and if you change what you want it to say you will only have to change it in one place.

Answer 4

Well the real answer is to use a javascript framework like jQuery where binding this stuff becomes much less repetitive than inline event stuff.

Otherwise, what you do is you add an onsubmit handler in the form which indeed does what you describe.

Alternatively, if localization is not an issue, you don't use "real text". You use a background image that looks like text. Then you can have css

<style>
.watermark {
    background-image: url(xxxxx.png)
}

.nowatermark {

}
</style>

(I'm guessing at the syntax)

Then you can have

<input type="text" name="search" class="watermark" onfocus="this.className='nowatermark'" onblur="if (this.value=='') this.className='watermark'" value="">

Answer 5

Yes, there are other ways to do it, but all of them will require typing more than just "search" 3 times.

For example, you could put a constant string in your class like this:

const string SearchText = "search";

Then, in your class you would say something like this:

if(textbox1.Text == SearchText)
{
   textbox1.Text = "";   
}

And in your aspx page you would say:

onfocus="if (this.value=='<%= SearchText %>') this.value = ''" value="<%= SearchText %>"

Now, doesn't it seem a lot simpler to just write the word "Search" 3 times?

Answer 6

If you have a button written "search" on it, you don't need the text on the input field, because it's obviously a search input. Here in sof there's no search button or label, so if there's no text on the input, you don't know what it's for.

In your case, there's 3 boxes for 3 search criterias. So instead of putting "search" on all of then, you should put the search criteria description. This is just to save the space a label would take. If you use labels, you don't need the text inside the input.

Finally, if on the back end you receive the input value as the description text, just ignore it.

Answer 7

Not sure if it's overkill, but I ended up using the telerik rad textbox instead.

                <telerik:RadTextBox ID="txtPublishedPapers" runat="server" EmptyMessage="Enter name of Published Papers/Journal here">
    </telerik:RadTextBox>

And it worked okay.