Javascript 如何在asp.net中使用jquery创建水印效果

我是这样做的，但我发现这不起作用，因为我在同一个文本框中给出了多个类。如何将其转换为使用多个类。我不知道如何使用选择器来工作

我是这样用的

<div class="inbox3full">
    <div class="threeinbg"><asp:TextBox ID="txtSortOrder" CssClass="threein water" 
            Text='<%# Bind("SortOrder") %>' runat="server" ToolTip="Type your Sort Order"></asp:TextBox></div>
</div>

使用jquery作为

<script type="text/javascript">
//    $(document).ready(function() { 
        $(function() {

            $(".water").each(function() {
                $tb = $(this);
                if ($tb.val() != this.title) {
                    $tb.removeClass("water");
                }
            });

            $(".water").focus(function() {
                $tb = $(this);
                if ($tb.val() == this.title) {
                    $tb.val("");
                    $tb.removeClass("water");
                }
            });

            $(".water").blur(function() {
                $tb = $(this);
                if ($.trim($tb.val()) == "") {
                    $tb.val(this.title);
                    $tb.addClass("water");
                }
            });
        });
   // });
    </script>

//$（文档）.ready（函数（）{
$（函数（）{
$（“.water”）。每个（函数（）{
$tb=$（此项）；
if（$tb.val（）！=此.title）{
$tb.removeClass（“水”）；
}
});
$（“.water”）.focus（函数（）{
$tb=$（此项）；
if（$tb.val（）==此.title）{
$tb.val（“”）；
$tb.removeClass（“水”）；
}
});
$（“.water”）.blur（函数（）{
$tb=$（此项）；
如果（$.trim（$tb.val（））==“”）{
$tb.val（此标题）；
$tb.addClass（“水”）；
}
});
});
// });

编辑 Sys未定义

.water{font-family: Tahoma, Arial, sans-serif;font-size:75%; color:black;}

<script type="text/javascript">
    $(document).ready(function() {
        $(".water").addClass('watermark');
        $(".watermark").live('focus', function() {
            $tb = $(this);
            if ($tb.val() == this.title) {
                $tb.val("");
                $tb.removeClass("water");
            }
        }).live('blur', function() {
            $tb = $(this);
            if ($.trim($tb.val()) == "") {
                $tb.val(this.title);
                $tb.addClass("water");
            }
        }).blur();​
    });

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
      $(".water").not(document.activeElement).blur();
    });
    </script>

.water{字体系列：Tahoma，Arial，无衬线；字体大小：75%；颜色：黑色；}
$（文档）.ready（函数（）{
$（“.water”）.addClass（“水印”）；
$（“.watermark”）.live（'focus'，function（）{
$tb=$（此项）；
if（$tb.val（）==此.title）{
$tb.val（“”）；
$tb.removeClass（“水”）；
}
}).live（'blur'，function（）{
$tb=$（此项）；
如果（$.trim（$tb.val（））==“”）{
$tb.val（此标题）；
$tb.addClass（“水”）；
}
}).blur（）；​
});
Sys.WebForms.PageRequestManager.getInstance（）.add_endRequest（函数（）{
$（“.water”）.not（document.activeElement.blur（）；
});

与您现有的类似，只需启动处理程序就更容易了，如下所示（编辑为使用

.live（）

，因为您正在UpdatePanel中添加它们）：

。如果框最初是空的，这会将水印/标题放入，这通常是您想要的。此外，当PanelPanel完成后，您还需要再次调用这些元素上的

.blur（）

，将水印应用于新创建的元素，如下所示：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
  $(".water").not(document.activeElement).blur();
});

---

这将模糊除当前聚焦元素外的所有元素，以免中断用户键入。

即使它有多个类，也应该可以工作。@Manticore:我明确添加了它。否则，代码中没有提到它，我已经尝试了这两种方法，尽管很抱歉，是的，在我发布后看到了另一行。@Nick:我尝试了上面的代码。它不适用于我的代码，尽管它适用于您显示的位置：（@Shantanu-你的元素是通过UpdatePanel还是其他什么动态添加的？@Nick:是的，我是动态添加控件的。我还将UpdatePanel与ajax 3一起使用。5@Shantanu-你需要使用

.live（）

，等一下，我会更新。@Nick:这是

live（）吗

在这两种情况下都有效，或者仅在使用updatepanel时有效

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
  $(".water").not(document.activeElement).blur();
});