Question

我有3个textarea，默认文字是“写东西”。假设我点击其中一个，默认文本将消失，并且textarea会获得焦点。但是，如果我单击另一个textarea，另一个textarea的默认文本将消失，但第一个textarea的默认文本将重新出现。我怎样才能做到这一点？同样的事情是，如果我点击第三个textarea，我点击的textarea的默认文本将消失，另一个将重新出现。

编码：

<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

你所说的（我认为）通常被称为水印。

看看这个： http://code.google.com/p/jquery-watermark/

Answer 2

首先，您使用某些类声明一个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 3

如果浏览器不支持该属性，请考虑使用HTML5 placeholder属性并使用javascript解决方案。

Answer 4

这应该为你做！

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

我在相当广泛的浏览器（与jQuery支持的浏览器相同）中测试了这一点。我可能已经错过了一两个，但这应该可以让你获得99.9％。

我希望这可以帮助您完成特定的任务，并帮助您了解它是如何完成的。

用jquery改变组元素

4 个答案: