ansaurus

Question

How do I remove the default Google Search Value from Google Search box?

Answer 1

A:

demo

You've been faked by google... the textbox has a background which look as if there was value... you should have checked that on the dev tools..

so just try to remove it on blur...

$('#q').blur(function(){
    $(this).css('background','none');
    if(this.value == '') {
       this.value = this.defaultValue;
    }
}).focus(function() {           
    if(this.value == this.defaultValue) {
       this.value = '';
    }
});

Reigel 2010-07-23 23:35:54

I tried this and the search... still stays there.

fmz 2010-07-23 23:40:07

Answer 2

+1 A:

When your code it needs to run when the DOM elements available to find, so $("#q") finds the id="q" elements to bind to. This means your script either needs to run after the elements it needs in the page (e.g. end of the <body>), or when the DOM is completely ready, like this:

$(function() {
  $('#q').click(function() {           
    if($(this).val() == 'Search...') 
      $(this).val('');
  });
});

If you're not doing this, and the $("#q") selector doesn't find any elements...there's just nothing to run .click() on, which binds that handler.

I think what you'll want is the reverse as well, which would look like this:

$(function() {
  $('#q').focus(function() {           
    if($(this).val() == 'Search...') $(this).val('');
  }).blur(function() {
    if($(this).val() == '') $(this).val('Search...');
  });
});

This will put "Search..." back in the box if it's empty and someone clicks outside, by relying on .focus() and .blur() instead of .click().

Nick Craver 2010-07-24 12:40:35

Hi Nick, your 61.5K points are well earned. Thanks for the solution.

fmz 2010-07-24 17:12:52

@fmz: Welcome :)

Nick Craver 2010-07-24 17:32:48

ansaurus

tags:

views:

answers:

How do I remove the default Google Search Value from Google Search box?

demo

related questions