刪除鍵入文本時的文本框的背景圖像。怎麼樣？

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/