Question

I’ve got a form input that has sample search keywords inside.

When the user focuses the input the text disappears, if there is nothing in the input the text reappears when unfocused.

That’s all good and works well but what I’d like to do is have the sample text grayed out and then have the normal solid color when the user is actually typing.

Below is the code I’m currently using. Any help would be great!

$(function() {
$('input').each(function() {
    $.data(this, 'default', this.value);
}).focus(function() {
    if (!$.data(this, 'edited')) {
        this.value = "";
    }
}).change(function() {
    $.data(this, 'edited', this.value != "");
}).blur(function() {
    if (!$.data(this, 'edited')) {
        this.value = $.data(this, 'default');
    }
});
});

Answer 1

Like this?

$(function() {
    $('input').each(function() {
        $.data(this, 'default', this.value);
    }).css("color","gray")
    .focus(function() {
        if (!$.data(this, 'edited')) {
            this.value = "";
            $(this).css("color","black");
        }
    }).change(function() {
        $.data(this, 'edited', this.value != "");
    }).blur(function() {
        if (!$.data(this, 'edited')) {
            this.value = $.data(this, 'default');
            $(this).css("color","gray");
        }
    });
});

http://jsfiddle.net/afcpb/

Simply sets it to gray initially, then black whenever focused and back to gray if the default text is set again.