Watermark on TextBox using JavaScript

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