0

这是我第一次使用 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 更“合适”，因为它分离了逻辑和格式，但 Chandrakant 对内联 JavaScript 的使用同样有效，实际上是我在我的网站上使用的。

4

2 回答 2

3

首先，您将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 部分直接放入元素中。这不是一个好习惯，因为您应该始终尝试拆分逻辑和格式。

于 2013-02-05T14:07:41.423 回答
1

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

  <input type="text" value="your text" onfocus="if (this.value == 'your text') {this.value = '';}" onblur="if (this.value == '') {this.value = 'your text';}">
于 2013-02-05T14:05:33.467 回答