WaterMark In ASP.NET TextBox Using JavaScript

This blog will show you, how you can display  a watermark in a textbox of ASP.NET, using JavaScript. For this, we will create a new ASP.NET Application and add a textbox control on the page. 
  1. <div>  
  2.     Username :<asp:textbox ID="txtUserName" Text="Use ; as a separator" Font-Bold="true" onfocus="WaterMarkFocus(this,'Enter your username')" onblur="WaterMarkBlur(this,'Enter your username')"  runat="server" ForeColor="gray" ></asp:textbox>      

  3. </div>  
After this, we will add JavaScript code, given below, to display the watermark. 
  1. <script type="text/javascript">  
  2.     function WaterMarkFocus(txt, text) {  
  3.         if (txt.value == text) {  
  4.             txt.value = "";  
  5.             txt.style.color = "black";  
  6.         }  
  7.     }  
  9.     function WaterMarkBlur(txt, text) {  
  10.         if (txt.value == "") {  
  11.             txt.value = text;  
  12.             txt.style.color = "gray";  
  13.         }  
  14.     }  
  15. </script>  
This JavaScript function uses a parameter value. This value will be used as a watermark text. When a user makes a focus on textbox, watermark text will disappear and on removing the mouse, watermark text will appear.

In case the user types some text, it will remain the same.

Ebook Download
View all
View all