使用jQuery更改group元素

4urapxun  于 2022-11-22  发布在  jQuery
关注(0)|答案(4)|浏览(134)

我 有 3 个 文本 区域 , 默认 文本 为 " 写 点 什么 " 。 假设 我 点击 其中 一 个 , 默认 文本 将 消失 , 该 文本 区域 将 获得 焦点 。 然而 , 如果 我 点击 另 一 个 文本 区域 , 另 一 个 文本 区域 的 默认 文本 将 消失 , 但 第 一 个 文本 区域 的 默认 文本 将 重新 出现 。 我 如何 才能 做到 这 一 点 ? 同样 的 事情 是 , 如果 我 点击 第 三 个 文本 区域 ,它 的 默认 文本 的 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 实现 这 一 点 ?

laximzn5

laximzn51#

首先 , 声明 一 个 包含 一些 类 的 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);
            }
        });
});

格式
这样 就 行 了 。)

yhuiod9q

yhuiod9q2#

你所说的(我认为)通常被称为水印。
看看这个:http://code.google.com/p/jquery-watermark/

xqkwcwgp

xqkwcwgp3#

这个应该够了!
http://www.jsfiddle.net/86TTc/1/
我已经在相当广泛的浏览器(jQuery支持的浏览器)上测试了这个方法,我可能漏掉了一两个,但是这个方法应该可以让您达到99.9%的效果。
我希望这能帮助你们完成具体的任务,并帮助你们理解它是如何完成的。

mspsb9vt

mspsb9vt4#

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

相关问题