comment créer un effet de filigrane en utilisant jquery dans asp.net

Question

J'ai obtenu ce article pour cela, mais j'ai trouvé que cela ne fonctionne pas car j'ai donné plusieurs classes dans la même zone de texte. Comment convertir ceci pour travailler avec plusieurs classes. Je ne sais pas comment utiliser les sélecteurs pour travailler avec.

Je l'utilise comme celui-ci

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

avec jquery comme

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

EDIT est définie 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

Au lieu d'un .each() comme vous, il est plus facile de tirer le gestionnaire blur, comme celui-ci (modifié pour utiliser .live() puisque vous les ajouter dans un 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 . Cela met le filigrane/titre dans si la boîte était initialement vide, ce qui est généralement ce que vous voulez. De même, lorsque votre PanelPanel se termine, vous aurez envie d'appeler .blur() sur ces éléments à nouveau pour appliquer le filigrane fraîchement créé ceux, comme ceci:

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

Cela brouiller tous les éléments sauf celui qui est actuellement concentré, pour ne pas interrompre l'utilisateur qui tape.