0

如何让 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>

正如我在jsFiddle上看到的那样。加载时，搜索框的默认值为值字段。并且失去焦点转到 rel 领域。

textarea 在失去焦点时获取 rel 字段，但不能与值字段一起使用。

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

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

如果有帮助，我正在执行以下操作。Wordpress 3.5.1、jQuery 1.9.1、jQuery UI 1.9、php 5.4 和 MySql Ver 14.14 Distrib 5.5.30。

4

2 回答 2

2

对我来说似乎工作正常；您可能打错了省略号或有不必要的空格。您可能需要修剪default_value以进行比较。

而不是rel您可能想要使用placeholder，它可以在现代浏览器中没有 JS 的情况下工作。

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

于 2013-04-25T03:14:34.433 回答
1

更新并简化了您的小提琴：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(""); 
         });
});

现在似乎按预期工作？

于 2013-04-25T03:26:35.470 回答