Question

如何让jquery有一个'textarea'包含默认消息，如'input'框。我是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>

正如我jsFiddle所见。即时加载搜索框默认值字段。失去焦点的是rel领域。

textarea在失去焦点时获取rel字段，但不能使用值字段来启动。

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

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

如果有帮助，我正在运行以下内容。 Wordpress 3.5.1，jQuery 1.9.1，jQuery UI 1.9，php 5.4和MySql Ver 14.14 Distrib 5.5.30。

Answer 1

似乎对我很好;你可能错误地输入了省略号或者有不必要的空格。您可能需要修剪default_value进行比较。

您可能希望使用rel而不是placeholder，而现代浏览器中没有JS可以使用{{1}}。

http://jsfiddle.net/ehwRU/1/

Answer 2

更新＆amp;简化了你的小提琴：http://jsfiddle.net/ehwRU/3/

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

现在似乎按预期工作了？

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

2 个答案: