Question

这是我第一次使用jQuery，我在理解如何在我的网站上实现它时遇到了一些困难，尽管这是我想要完成的一项相对简单的任务。

我的目标是修改我网站上的现有textarea，使其显示默认消息，当客户端点击textarea输入其信息时，该消息将消失。最初我只是想使用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's更“合适”，因为它分离了逻辑和格式，但Chandrakant使用内联JavaScript也同样有效，实际上是我在网站上使用的。

Answer 1

首先，您将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-Version。

查看Chandrakant的其他答案：

我不同意将JavaScript部分直接放入元素中。这不是一个好习惯，因为你应该总是试图分裂逻辑和格式化。

Answer 2

不需要为此使用jQuery，如果您仍然有兴趣使用jQuery-那么使用以下逻辑

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

使用jQuery单击时，默认文本必须在textarea中消失

2 个答案: