In this article I will explain with an example, how to add Watermark to an ASP.Net TextBox using JavaScript.
 
 
HTML Markup
The HTML Markup consists of:
TextBox – For capturing text.
The TextBox has been assigned with the JavaScript onblur and onfocus event handlers.
<asp:TextBox ID="txtName" runat="server" Text="Enter your text here" ForeColor="Gray" onblur="WaterMark(this, event);" onfocus="WaterMark(this, event);"></asp:TextBox>
 
 
Implementing Watermark TextBox using JavaScript
The Watermark JavaScript function can be implemented on the ASP.Net TextBox in the following ways.
Client Side
Inside the WaterMark function, two checks are performed as below:
1. If the TextBox is empty and the event type is blur, then it changes the font color as Gray and sets the default text.
2. If the TextBox text matches default text and the event type is focus event then, it clears the TextBox and sets the font color as Black.
<script type="text/javascript">
    function WaterMark(txt, evt) {
        var defaultText = "Enter your text here";
        if (txt.value.length == 0 && evt.type == "blur") {
            txt.style.color = "gray";
            txt.value = defaultText;
        }
        if (txt.value == defaultText && evt.type == "focus") {
            txt.style.color = "black";
            txt.value = "";
        }
    }
</script>
 
Server Side
Inside the Page Load event handler, two JavaScript event handlers i.e. onblur and onfocus have been added as Attribute.
Note: Both onblur and onfocus event handler triggers WaterMark JavaScript function.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    txtName.Attributes.Add("onblur", "WaterMark(this, event);");
    txtName.Attributes.Add("onfocus", "WaterMark(this, event);");
}
 
VB.Net
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles Me.Load
    txtName.Attributes.Add("onblur", "WaterMark(this, event);")
    txtName.Attributes.Add("onfocus", "WaterMark(this, event);")
End Sub
 
 
Screenshot
Watermark TextBox using JavaScript
 
 
Demo
View Demo
 
 
Downloads
Download Code