Question

I have 3 textarea with a default text "Write something". Let say if I click on one of them, the default text will disappear and that textarea get focus. However, if I click on another textarea, the default text of another textarea will disappear but the default text of first textarea will reappear. How can I make this happen? Same thing is that if I am to click on the third textarea, its default text of the textarea that I clicked on will disappear and the other will reappear.

Coding:

<textarea class="t" id="tt3">Write something</textarea>
<textarea class="t" id="tt3">Write something</textarea>
<textarea class="t" id="tt3">Write something</textarea>

How can I do that with jQuery?

Answer 1

First, you declare a css with some classes:

.t {
    font-family: Helvetica, Geneva, Arial, sans-serif;
}

.txt-selected {
    font-style: normal;
}

.txt-unselected {
    font-style: italic;
}

Then, in javascript you write:

$(document).ready(function () {

    var defaultText = "write something";

    $(".t")
        .addClass("txt-unselected")
        .val(defaultText)
        .focus(function () {

            var $this = $(this);

            if($this.val() == defaultText)
            {
                $this.val("");
                $this.removeClass("txt-unselected");
                $this.addClass("txt-selected");
            }
        })
        .blur(function () {

            var $this = $(this);

            if($this.val() == "")
            {                
                $this.removeClass("txt-selected");
                $this.addClass("txt-unselected");
                $this.val(defaultText);
            }
        });
});

That should do the work. 😉