Search Box Text - Show Hide Feature

Question

On Chris Coyer's site he uses a nice little search box. I am curious to know how you get the text in the search box to disappear and reappear when you click out of the box.

Thanks to a helpful person on this forum I use the following to have the text disappear when I click in the box:

<input type="text" value="Search" onfocus="if (this.value=='Search') this.value='';"/>

Also, in Safari there is a nasty border around the input field when I click inside. What is the code for getting rid of that?

Thanks!

Answer 1

I do not believe you can remove the border in Safari, though open to corrections.

To get the text to appear again when you click out of the search box, you can use this:

<input onblur="if (this.value == '') this.value ='Search';" />

Answer 2

To reset the Search text, add an onblur:

onblur="if (this.value=='') this.value='Search';"

so your input box becomes:

<input type="text" value="Search" onfocus="if (this.value=='Search') this.value='';" onblur="if (this.value=='') this.value='Search';"/>

also, for the Safari border, add this in your css:

input[type=text]:focus,
input[type=password]:focus {
    outline: 0 none;
}

Answer 3

You can get rid of static value duplication if you make use of the defaultValue property

Compare this

<input type="text" value="Search" onblur="if ('' == this.value) this.value = 'Search';" onfocus="if ('Search' == this.value) this.value='';"/>

which has three instances of the statc string "Search", to this

<input type="text" value="Search" onblur="if ('' == this.value) this.value = this.defaultValue;" onfocus="if (this.defaultValue == this.value) this.value='';"/>

which has only one.

But if you really want to take this to the "next level", you could implement something like the nearly canonical labels.js. The code is really old now, having been authored in 2002 (I think), but the concept is sound and it's basic concept has since been put to good use with modern frameworks.