Here is my problem:
When the searchbox get focused it become like this
--------------------
--------------------
Upon leaving the searchbox a string will automatically add to the searchbox
--------------------
Search
--------------------
What I want is when the searchbox get focus there will be a default string Search that when the user upon writing something the whole string Search will be replace with the string the user put in:
Once the user has done searching and want to search again the searchbox contains the string from earlier, what I want is when the user click on the searchbox it will automatically erase the string that exist in the searchbox and set it to default string.
Here is the code I so far:
<div id="search">
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>" >
<input id="s" type="text" name="s" onfocus="if(this.value=='search site')
{this.value=''};" onblur="if(this.value==''){this.value='search site'};"
value="<?php echo wp_specialchars($s, 1); ?>" />
<input id="searchsubmit" type="submit" value="" />
</form>
</div>
<div class='clear'></div>
If you're using the HTML5 spec, you can simply use the placeholder attribute, like this:
<input id="s" type="text" name="s" placeholder="Search..." />
This will function exactly how you've described.