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

Question

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

我就是这样用的

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

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

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

You can see it working here。如果盒子最初是空的，这通常会放入水印/标题，这通常是您想要的。此外，当您的 PanelPanel 完成时，您需要再次对这些元素调用 .blur() 以将水印应用于新创建的元素，如下所示：

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

这将模糊除当前焦点之外的所有元素，以免打断用户输入。