使用jQuery单击时,默认文本必须在文本区域中消失


Default text must disappear in textarea upon click using jQuery

这是我第一次使用jQuery,我很难理解如何在我的网站上实现它,尽管这是一项相对容易的任务。

我的目标是修改我网站上现有的文本区域,使其显示默认消息,当客户点击文本区域输入信息时,该消息就会消失。最初我只是想使用html占位符属性,但由于某些原因,它不起作用。。(我正在使用IE 8)。所以现在我正在尝试使用这个jQuery代码,这是建议给我的

这是代码:

                    <textarea style="background: #F6E3CE; overflow:auto;" rows="3" cols="70" name="sComments" id="sComments" 
                        <script type="text/javascript"><?php
                        $("input#text").focus(function(){
                            if( $(this).val() == "default message" )
                            {
                                $(this).val("");
                            }
                        }).blur(function(){
                            if( $(this).val() == "" )
                            {
                                $(this).val("default message");
                            }
                        }); ?>
                        </script>
                        onchange="commentsChanged(this,<?php echo $pKey;?>);"><?php echo str_replace(''r'n', "'n", rtrim($variable1[0][aComments]));?></textarea>

如果我理解正确的话,我在代码开头引用了jQuery文件,如下所示:

<script language="JavaScript" src="../js/jquery-1.6.4.js"></script>

在最近的一次尝试中,该网站的这一部分甚至无法打开。在做了一些研究之后,我仍然不确定自己做错了什么。

谢谢。

编辑:下面的两个答案都很好,效果很好。Tenhouse的更"恰当",因为它将逻辑和格式分离,但Chandrakant对内联JavaScript的使用同样有效,实际上也是我在网站上使用的。

首先,您将PHP代码和JavaScript代码混合在一起,这将不起作用,因为它们没有直接关系。

其次,您必须将focus / blur -listeners放在document ready函数中(这意味着它将在加载文档时加载)。

第三,我强烈建议您阅读一些关于jQuery的基础知识——您可以从以下内容开始:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

编辑:由于你似乎真的对一切都很困惑,这里有一个完整的例子:

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var defaultMessage = "default message";
                $("#myTextArea").focus(function(){
                    if( $(this).val() == defaultMessage){
                        $(this).val("");
                    }
                }).blur(function(){
                    if( $(this).val() == "" ){
                        $(this).val(defaultMessage);
                    }
                }).val(defaultMessage);
            });
        </script>
    </head>
    <body>
        <textarea id="myTextArea"></textarea>
    </body>
</html>

在上面的例子中,您还可以看到我直接从他们的服务器上使用了一个更新的jQuery版本。

Chandrakant的另一个答案:

我不同意将JavaScript部分直接放入元素中。这不是一个好的做法,因为你应该总是尝试拆分逻辑&格式化。

无需使用jQuery,如果您仍然对使用jQuery感兴趣,请使用以下逻辑

  <input type="text" value="your text" onfocus="if (this.value == 'your text') {this.value = '';}" onblur="if (this.value == '') {this.value = 'your text';}">