RSS

Watermark on TextBox using JavaScript

29 Aug

Some time you need  watermark effect on Asp.net 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”)

        {

            txt.style.color = “gray”;

            txt.value = defaultText;

        }

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

        {

            txt.style.color = “black”;

            txt.value=””;

        }

    }

</script>

 

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);”>

</asp:TextBox>

 

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

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

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

 

Advertisements
 
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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

 
%d bloggers like this: