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

Question

我得到了这篇 文章 来执行此操作，但我发现这不是因为我在同一个文本框中给出了多个类。如何将其转换为适用于多个类。我不知道如何使用选择器来使用。

我像这样使用

<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>

编辑 系统未定义。

.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>

Answer 1

而不是像你这样的 .each() ，它更容易只需触发 blur 处理程序，如下所示（编辑为使用 .live() 因为您将它们添加到 UpdatePanel 中）：

$(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();​
});

您可以看到它在这里工作。如果该框最初是空的，这将添加水印/标题，这通常是您想要的。此外，当您的 PanelPanel 完成后，您将需要再次对这些元素调用 .blur() 以将水印应用到新创建的元素，如下所示：

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

这将模糊除当前聚焦的元素之外的所有元素，如下所示不打断用户打字。