Watermark on TextBox using JavaScript

29 Aug

Some time you need  watermark effect on Text Box . then you use this code

JavaScript Code:


<script type = “text/javascript”>

    var defaultText = “Enter text here”;

    function WaterMarks(txt, evt)


        if(txt.value.length == 0 && evt.type == “blur”)


   = “gray”;

            txt.value = defaultText;


        if(txt.value == defaultText && evt.type == “focus”)


   = “black”;






Above script will be called on onblur and onfocus events of the  Text Box.

The script does the following two checks

1. If the Text Box is empty and the event type is blur event it sets the watermark and changes the font color as Gray.

2. If the Text Box  matches default text and the event type is the focus it clears the Text Box and sets the font color as Black.


<asp:TextBox ID=”txtName” runat=”server” Text = “Enter text here”

    ForeColor = “Gray” onblur = “WaterMarks(this, event);”

    onfocus = “WaterMarks(this, event);”>



if Visual Studio will throw warning when you call client side event in the above you need to call from code behind

txtName.Attributes.Add(“onblur”, “WaterMark(this, event);”);

txtName.Attributes.Add(“onfocus”, “WaterMark(this, event);”);  


Leave a comment

Posted by on August 29, 2013 in ASP Dot Net C#, Java Script


Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: