изменить элемент группы с помощью jquery

Question

У меня есть 3 текстовые области с текстом по умолчанию «Напишите что-нибудь».Допустим, если я нажму на одну из них, текст по умолчанию исчезнет, ​​и текстовая область получит фокус.Однако, если я нажму на другую текстовую область, текст по умолчанию другой текстовой области исчезнет, ​​но текст по умолчанию первой текстовой области появится снова.Как я могу это сделать?То же самое, что если я нажму на третью текстовую область, ее текст по умолчанию для текстовой области, на которую я нажал, исчезнет, ​​а другая появится снова.

Кодирование:

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

Как мне это сделать с помощью jquery?

Спасибо.

Answer 1

Сначала вы объявляете CSS с некоторыми классами:

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

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

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

Затем в javascript вы пишете:

$(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);
            }
        });
});

Это должно сделать работу;)

Answer 2

То, о чем вы говорите (я думаю), часто называют водяным знаком.

Взгляните на это: http://code.google.com/p/jquery-watermark/

Answer 3

Это должно сделать это для тебя!

http://www.jsfiddle.net/86TTc/1/

Я тестировал это в довольно широком диапазоне браузеров (тех, которые поддерживает jQuery). Возможно, я пропустил один или два, но это должно помочь вам на 99,9% пути.

Я надеюсь, что это поможет вам как с вашей конкретной задачей, так и поможет вам понять, как это делается.

Answer 4

Рекомендуется использовать атрибут HTML5 placeholder и использовать решение javascript, если браузер не поддерживает этот атрибут.