How do I erase the background of a field when the user types something?

I have a search field which basically gives the user a "tip" of wha开发者_StackOverflow社区t to search (which is the background image). I need to erase the background when he types something. But I'm not sure how.

This is the searchfield:

<input style="font-size:20px; width:300px; color: #444; background: url('http://chusmix.com/Imagenes/busca.png') white;" type="text" id="s"  name="s" onblur="if(this.value == '') { this.style.background='url(http://chusmix.com/Imagenes/busca.png) no-repeat 0% 50% white';}">

Is there an easy way to do it? If you need more info please ask. Thanks

Add this little bit of javascript in the tag: onFocus='this.value=""';

I think you want to get rid of the onblur and instead make it onfocus (so the background changes when they enter the box).. or even onchange so whenever they type it goes away.

I am using Facebook like plugin from here

http://github.com/loopj/jQuery-Tokenizing-Autocomplete-Plugin

I just had a go at this one and it was really easy to implement using an asp.net page to output the JSON (from the search params) Then theres just a few lines of Javascript you need to create it (and the settings)

$(document).ready(function() {
        $("#Users").tokenInput("../Services/Job/UnassignedUsers.aspx?p=<%= projectID %>&j=<%= jobID %>", {
        hintText: "Begin typing the user name of the person you wish to assign.",
        noResultsText: "No results",
        searchingText: "Searching..."
    });
});

Hope this might help you

Assume txtTopSearchBox is the id of text box and "Search" is the content on that (tip)

$(document).ready(function() { $("#txtTopSearchBox").focus(function() { $(this).removeClass().addClass("txtSearchBoxFocus").val("");

});
$("#txtTopSearchBox").blur(function() {
    if (($(this).val() == "Search") || ($(this).val() == "")) {
        $(this).removeClass().addClass("txtSearchBox").val("Search");
    }
});

$("#txtTopSearchBox").keypress(function(e) {
    if (e.which == 13) {

        var key = $("#txtTopSearchBox").val();
        key = escape(key);
        window.location.href = "browse.aspx?search=" + key;
        return false;
    }
});

});

Tested and works in Fx 3.6, Safari 5 and Chrome. Image too big for field when not copying the attributes to the withoutTip too

<style type="text/css">
.withTip { 
  font-size:20px; 
  width:300px; 
  color: #444; 
  background: white url(http://chusmix.com/Imagenes/busca.png) }
.withoutTip { background: white url()} 
</style>

<input class="withTip" type="text" id="s"  name="s" 
onkeyup="this.className=(this.value=='')?'withTip':'withoutTip'" />

or

<style type="text/css">
#s {font-size:20px; width:300px; color: #444;}
.withTip { background: white url(http://chusmix.com/Imagenes/busca.png) }
.withoutTip { background: white url()} 
</style>

If you are interested in html5, the upcoming placeholder attribute will take care of this. But alas, not all browsers are html5 ready. The second sub-heading on this page shows browser compatibility.

Until then, the JavaScript method PMV describes works well.