Clear Default Search String on Focus

$("#s")
    .val("Search...")
    .css("color", "#ccc")
    .focus(function(){
        $(this).css("color", "black");
        if ($(this).val() == "Search...") {
            $(this).val("");
        }
    })
    .blur(function(){
        $(this).css("color", "#ccc");
        if ($(this).val() == "") {
            $(this).val("Search...");
        }
    });

Set value of field to “Search…”
When field comes into focus, set color to black.
If value is default, remove it.
When field goes out of focus, set color back to light gray.
If value is empty, put back default value

Comments

Dyllon

# September 18, 2009

I would like the text to only go back to grey if it is the default ‘search…’ text..

blur(function(){ if ($(this).val() == "") { $(this).css("color", "#ccc"); $(this).val("Search..."); }

nick

# February 6, 2010

i think this one is better, it will work for all textboxes and it uses the in page value instead of declaring the value in jquery.

swap_val = []; $(".swap").each(function(i){ swap_val[i] = $(this).val(); $(this).focusin(function(){ if ($(this).val() == swap_val[i]) { $(this).val(""); } }).focusout(function(){ if ($.trim($(this).val()) == "") { $(this).val(swap_val[i]); } }); });

Pablo

Permalink to comment# September 25, 2015

Yes nice. But something is quite disturbing with this solution. Imagine an input field that returns an error (ie. an email field you must fill). When it prompts back to correct your input, all field will be cleared on focus… Am I right?

Loading...

StuartH

# July 20, 2010

This is perfect and has made my day! Thanks.

simona

# June 6, 2011

why it doesn’t work for me?
this is my page
please take a look, I’m going crazy

http://www.athenarestauri.com/prova-jquery-2.html

Mike

Permalink to comment# February 9, 2013

You need to put your jquery functions inside:

$(document).ready(function(){
// do jQuery stuff
})

Loading...

Matt

# December 30, 2011

@Dyllon

$(“#searchfield”)
.val(“Search…”)
.css(“color”, “#999”)
.focus(function(){
$(this).css(“color”, “black”);
if ($(this).val() == “Search…”) {
$(this).val(“”);
}
})
.blur(function(){
$(this).css(“color”, “#999”);
if ($(this).val() == “”) {
$(this).val(“Search…”);
}else if($(this).val() != “Search…”){
$(this).css(“color”, “black”);
}
});

Heo Chiên Bơ

# June 18, 2012

Hi, I’m new to jQuery!
Sorry for my confusion as I know this can be done quite simple in javascript, just like this:

--------------
 <form>
...
 <input id=string  onFocus="this.form.reset()">
...
 </form>
--------------

Is it much simpler?

Comments

Leave a Reply Cancel reply