Form Titles with javascript

Question

Im using this script for form titles:

$(document).ready(function(){
    $('.add-news').each( function () {
        $(this).val($(this).attr('defaultValue'));
        $(this).css({'color':'#686868' ,  'font-size':'11px', 'font-weight':'bold'});
    });
    $('.add-news').focus(function(){
        if ( $(this).val() == $(this).attr('defaultValue') ){
            $(this).val('');
            $(this).css({'color':'#686868' , 'font-size':'11px' ,'font-weight':'bold'});
        }
    });
    $('.add-news').blur(function(){
        if ($(this).val() == '' ){
            $(this).val($(this).attr('defaultValue'));
            $(this).css({'color':'#686868' ,  'font-size':'11px', 'font-weight':'bold'});
        }
    });

});

The example is here

This code working perfect for inputs, but in textarea, the above css doesnot work. How can I solve this? Thanks in advance

Answer 1

I think the right way is using .html() instead of .val() on TextArea elements.

Answer 2

After removing the obvious errors ('defaultue' instead of 'defaultValue', and missing commas in the objects of the css method) it works fine for me:

http://jsfiddle.net/TY2sf/