Clearing a default value in a search box with jQuery

Question

Hi,

Can't seem to achieve this simple functionality! All I want is to clear a default search term in an input box when it is clicked. The following works up to a point but clears any other text entered, I would've thought resetting search_form_text should have solved this:

search_form_text = $('#block-search-0 #edit-search-block-form-l').attr('value');

if (search_form_text == 'Enter search keywords here') {

        $('#block-search-0 #edit-search-block-form-l').click(function() {           
            $('#block-search-0 #edit-search-block-form-l').attr('value', '');
            search_form_text = '';
        });

    }

Hmmmm... :)

Answer 1

Try rearranging it like this:

$('#edit-search-block-form-l').click(function() {           
  if($(this).val() == 'Enter search keywords here') 
    $(this).val('');
});

This just prevents the user from searching for 'Enter search keywords here' specifically, but is that really an issue? Look up top on this page, type in "search", click out, then click the box again...would a user ever even notice it? probably not :)

The why it doesn't work part:
$('#block-search-0 #edit-search-block-form-l').attr('value', ''); will clear the value every time, you need an if to see if you actually want to clear :)

Answer 2

If plain javascript is good for you..

document.getElementById('ElementId').value='';

Answer 3

do you want something like http://jsbin.com/adufe/2/edit this?

Kind Regards --Andy

Answer 4

Why not do:

$('#edit-search-block-form-1').focus(function(){
 if ($(this).val() == "Enter search keywords here"){
   $(this).val("");
 }
});
$('#edit-search-block-form-1').blur(function(){
 if ($(this).val() == ""){
   $(this).val("Enter search keywords here");
 }
});

It will keep the description in the box, as long as the box is "blank".

Answer 5

Found this solution here, seems cleaner to me: http://snipplr.com/view/15360/jquery-clear-default-input-values/

(function($){
$.fn.clearDefault = function(){
    return this.each(function(){
        var default_value = $(this).val();
        $(this).focus(function(){
            if ($(this).val() == default_value) $(this).val("");
        });
        $(this).blur(function(){
            if ($(this).val() == "") $(this).val(default_value);
        });
    });
};
})(jQuery);

// Usage: $('input.clear-default').clearDefault();