Facebook-Like Leave a Comment Script with jQuery


We can easily create Facebook-Like textbox for leaving comments in an easy and cool way using jQuery, I am leaving an example below.

You can see an implementation working here

HTML

<textarea class="comment_empty">Write a comment</textarea><br /> <input type="submit" id="submit" value="Submit" style="display: none" />

jQuery

$(document).ready(function(){
    var submit = $("#submit");

    $("textarea").blur(function() {
        if ($(this).val() == "") {
            $(this).val("Write a comment")
                   .removeClass("comment_filled")
                   .addClass("comment_empty");
            submit.hide();
        }
    }).focus(function() {
        if ($(this).val() == "Write a comment") {
            $(this).val("")
                   .removeClass("comment_empty")
                   .addClass("comment_filled");
            submit.show();
        }
    });
});

CSS

.comment_empty {
   color: gray;
   height: 30px;
}

.comment_filled {
   color: black;
   height: 100px;
}

User Comments

to leave a comment.
2010-11-16 10:09 PM
Niti Dentico said:
Why the if-statements? It's doing it's job without it.
2010-11-11 01:05 AM
Carlos Rivera said:
testing... very nice
2010-11-29 12:31 AM
German Rodriguez said:
You need the IFs. because we dont want to lose what the user has written when the textbox loses focus
2011-02-10 07:22 AM
Amit Patil said:
asas
2011-02-10 07:22 AM
Amit Patil said:
http://www.amitpatil.me/demos/facebook-like-comment-script/facebook-like-comment-script/
2011-09-27 09:11 PM
Chad Donoghue said:
testing 123
2011-11-01 04:59 AM
Maung Ching said:
hi testing