删除键入文本时的文本框的背景图像。怎么样？

Question

我有我的背景图片的文本框。每当我点击文本框时，bg图像应该消失，只有文本应该可见。当文本被清除时，bg图像应该再次出现。这怎么可能 ？

<asp:TextBox runat="server" Width="160px" ID="txt_google_search" style="padding: 6px; background: url('http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif') no-repeat scroll left center rgb(255, 255, 255);" ></asp:TextBox> 

我在我的代码隐藏中尝试了下面的代码，但它无法工作。

txt_google_search.Attributes.Add("onclick", "me.style.backgroundImage = none;") 

Answer 1

问题是，这只是客户端的OnClick事件的错误代码。我会用这个jQuery，并产生这样的事情：

<style> 
.bgImage { 
    background: url(img/sprite.gif) no-repeat left top; 
} 
</style> 

<script> 
$(function(){ 
    $("#<% Response.Write(txt_google_search.ClientId) %>").live("focus", function() { 
     $("#<% Response.Write(txt_google_search.ClientId) %>").addClass("bgImage"); 
    }); 
    $("#<% Response.Write(txt_google_search.ClientId) %>").live("blur", function() { 
     $("#<% Response.Write(txt_google_search.ClientId) %>").removeClass("bgImage"); 
    }); 
}); 
</script> 

Answer 2

完美的工作。检查文章在这个网址：http://www.davidjrush.com/blog/2009/06/javascript-creating-a-simple-textbox-watermark/