[转]jQuery TextBox Water Mark with asp.net

最新推荐文章于 2025-09-10 14:53:18 发布

weixin_30364325

最新推荐文章于 2025-09-10 14:53:18 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/freeliver54/p/3527328.html

本文介绍了一个使用jQuery实现的带有水印功能的TextBox控件。该控件能够在TextBox为空时显示提示信息，并在用户输入时隐藏这些提示。通过简单的jQuery脚本和ASP.NET的结合，实现了这一功能，并提供了示例代码。

本文转自：http://naspinski.net/post/jQuery-TextBox-Water-Mark-with-aspnet.aspx

I stole majority of this code from

http://www.aspcode.net/A-watermark-texbox-with-JQuery-and-aspnet.aspx

but I added a bit to make it swap css classes as well

 

$().ready(function() {
   swapValues = [];
   $(".wm").each(function(i) {
     swapValues[i] = $(this).val();
     $(this).focus(function() {
       if ($(this).val() == swapValues[i]) {
         $(this).val("").removeClass("watermark")

       } 
    }).blur(function() { 
        if ($.trim($(this).val()) == "") { $(this).val(swapValues[i]).addClass("watermark") } }) })
 }); 


To use it, make sure your TextBox has (one of) it's css classes set to "wm". If you want a seperate style to be applied add that initially as well, in my example, it swaps "watermark" in and out as a css class.
 

<asp:TextBox ID="txt" runat="server"
   Text="this is the watermark" CssClass="wm watermark" />