Quick & Easy jQuery Default Values

I have some more meaty stuff to post in the near future, but those posts will take some time to develop. Instead of going down that path today, I decided to go for the low-hanging fruit of sharing the quick & easy function I threw together to give default values to a client's web app. No long theory discussion today, but if you find this code useful, great. Basically, the function takes as input the ID of the field to which you want to assign a default label, and the text of that label. Then it immediately gives the field that value in a light grey color if there is no existing value. When the user clicks into the field, it blanks out to let the user supply their actual input. When the user leaves the field, it checks the value to see if the field is blank, reassigning it as the label in light grey if so.

function giveGreyLabel(id, label) {
    if ($("#" + id).val() == "") {
        $("#" + id).val(label);
        $("#" + id).css("color", "silver");
        $("#" + id).click(function () {
            if ($("#" + id).val() == label) {
                $("#" + id).val("");
                $("#" + id).css("color", "black");
            }
        });
    }

    $("#" + id).blur(function () {
        if ($("#" + id).val() == "") {
            $("#" + id).val(label);
            $("#" + id).css("color", "grey");
        }
    });
}

A refinement to the above code came out in the comments. Basically, by employing CSS classes for the styles, you can use selectors to do the adjustments. That would look something like:

$('.defaultText').blur(function(){
   var me = $(this);
   if(me.val() === ''){
      me.val(me.attr('default'));
      me.addClass('defaultColor');
   }
});

$('.defaultText').focus(function(){
   var me = $(this);
   if(me.val() === me.attr('default')){
      me.val('');
      me.removeClass('defaultColor');
   }
});

And the HTML to use it would be:

< input type="text" class="defaultText" default="First Name" id="firstname"/>

This code handles the changes for when the fields gain or lose focus, but do not do anything for the initial view. To handle that, you would need to either call the .blur() function for the defaultText class, or you need to employ a third function:

$('.defaultText').each(function(){
   var me = $(this);
   if(me.val() === ''){
      me.val(me.attr('default'));
      me.addClass('defaultColor');
   }
});