How to add default text to search bar? [duplicate]

Question

This question already has answers here:

Adding default search text to search box html (4 answers)

Closed 8 years ago.

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>

Answer 1

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.

http://davidwalsh.name/html5-placeholder

Answer 2

Probably you are talking for this

<input id="s" type="text" name="s" />
<script>
function addEvents(id) {
    var field  = document.getElementById(id);
     field.onfocus  = function ()  {
        this.value  = "";
    };
     field.onblur  = function ()  {
        if (this.value  == "")  {
            this.value  = "Search";
        }
    };
}
addEvents("s");
</script>