文本区域焦点之前有默认文本的jQuery字段

我如何让jquery有一个像“输入”框一样的“textarea”包含默认消息。我对jQuery非常陌生，似乎无法理解这一点。我很抱歉要问这个问题

我做了很多研究，希望将非常简单的jQuery功能合并到一个站点中。我真的试图将额外的js占用限制在最少的脚本上。不是大的插件脚本。在我的研究中，我发现这样做有很多帮助

我有两个自定义搜索查询，我已经尽可能接近我的预期工作，因为我能够使他们。对于这些小搜索框，我使用一个小脚本将“输入”的内容替换为自定义消息，如“搜索…”，直到有人（聚焦）在框中键入。这个小剧本写得很好。但我也希望同样的脚本在评论区也能这样做

$('#outputList, #outputList2').removeClass('no-display');
$(document).on("blur", "#inputBox, #inputBox2, #commentArea", function(){
    var default_value = $(this).attr("rel");
    if ($(this).val() === ""){
        $(this).val(default_value);
    }
}).on("focus", "#inputBox, #inputBox2, #commentArea", function(){
    var default_value = $(this).attr("rel");
    if ($(this).val() === default_value){
        $(this).val("");
    }
});

基本的html如下所示。对于评论框

<textarea name="comment" id="commentArea" class="input-block-level" rows="6" rel="Leave a Comment…"></textarea><!--text between the text areas tags does not get removed -->

对于搜索框

<input type="text" id="inputBox" value="Search for..." rel="Search for..." />
<ul id="outputList" class="align-left no-display">
    <!-- list to be filtered -->
</ul>

<input type="text" id="inputBox2" value="Search for..." rel="Search for..." />
<ul id="outputList2" class="align-left no-display">
   <!-- list to be filtered -->
</ul>

在我的电脑上可以看到。加载时立即将搜索框的值字段作为默认值。当失去焦点时，转到rel字段

textarea在失去焦点时获取rel字段，但不使用值字段开始

我通过HTML知道占位符，但我希望它与搜索框的格式相同，并以相同的方式操作。这可能吗

我已经搜索并找到了很多答案，但似乎没有一个能够让deafult字段加载到评论框中。提前感谢你们的帮助和时间

---

如果有帮助的话，我正在运行以下程序。Wordpress 3.5.1、jQuery1.9.1、jQueryUI1.9、PHP5.4和MySql版本14.14发行版5.5.30。

对我来说似乎工作得很好；您可能键入了错误的省略号或有不必要的空格。您可能需要修剪

默认值

以进行比较

您可能不想使用

rel

，而是想使用

占位符

，在现代浏览器中，占位符在没有JS的情况下也可以工作

---

对我来说似乎很管用；您可能键入了错误的省略号或有不必要的空格。您可能需要修剪

默认值

以进行比较

您可能不想使用

rel

，而是想使用

占位符

，在现代浏览器中，占位符在没有JS的情况下也可以工作

---

稍微更新并简化了您的小提琴：

---

现在似乎可以按预期工作了？？？

更新并简化了您的小提琴：

---

现在似乎像预期的那样工作了？？？

当我读到标题时，我想到了

占位符属性。哇，我现在感觉很糟糕，但是当我键入省略号时，我得到了“…”而不是你得到的，它似乎将它们浓缩成了三个更近的点。以及我在rel领域的经验。我想在视觉上强调框比占位符有焦点。除非我遗漏了什么，否则当你不聚焦时，它就会消失。当我读到标题时，我想到了
占位符
属性。哇，我现在感觉很糟糕，但当我键入省略号时，我得到的是“…”而不是你所拥有的，它似乎将它们浓缩为三个更近的点。以及我在rel领域的经验。我想在视觉上强调框比占位符有焦点。除非我遗漏了一些东西，否则当你输入的不是焦点时，它就会消失；看起来很好用。没有任何设置初始textarea值的内容；看起来很好用。非常感谢你。我确实尝试使用占位符值。但当搜索框获得焦点时，文本会一直保留，直到有人开始打字。我希望在聚焦时删除默认值，以获得更多的视觉强调。非常感谢大家的帮助。我不知道为什么我的一个省略号格式正确，而另一个不正确。当我将压缩后的文件复制到文本区域时，它也起了作用。非常感谢，非常感谢。我确实尝试使用占位符值。但当搜索框获得焦点时，文本会一直保留，直到有人开始打字。我希望在聚焦时删除默认值，以获得更多的视觉强调。非常感谢大家的帮助。我不知道为什么我的一个省略号格式正确，而另一个不正确。当我将压缩后的文件复制到文本区域时，它也起了作用。非常感谢你。
$("#inputBox, #inputBox2, #commentArea").each(function () {    

    var default_value = $(this).attr("rel");

    $(this).val(default_value)

        .blur(function () { 
            if (!$(this).val().length) $(this).val(default_value); 
         })

        .focus(function () { 
            if ($(this).val() === default_value) $(this).val(""); 
         });
});