blog | Search Box - auto disappear/reappear text

Search Box - auto disappear/reappear text

Sunday January 03 2010

I was doing a couple of minor adjustments to my blog Repatriate Me! and found a very easy way to have a search box have text that will disappear on focus and then reappear when unfocused provided there is no user submitted text there.

I have to admit that I found this on another site, but it’s been removed from my browser history and I can’t remember the name of the site so am unable to provide proper credit at this time. If I can find it I will give credit—that’ll teach me to not document my code with finds.

Anyhow here is the ExpressionEngine code for the search box:

{exp:search:simple_form search_in="everywhere" weblog="BLOGNAME" id="search-form" name="search"}
    <input type="text" name="keywords" class="txt" size="18" maxlength="100" value="Search Here" title="" />
{/exp:search:simple_form} 

and the Javascript

<scr*pt type="text/javascript">
$('input').focus(function(){
   var defaultText = $(this).val();
    $(this).val('');

    $("input").blur( function () {
     var userInput = $(this).val();

            if (userInput == ''){
                  $(this).val(defaultText);
                }
        });
 });
</scr*pt> 