Watermark in ASP.NET TextBox using JavaScript

Suggested Videos
Part 3 - JavaScript to select all checkboxes in GridView
Part 4 - Change gridview row color when checkbox is checked
Part 5 - ASP.NET TextBox and JavaScript



In this video we will discuss how to create a watermark in ASP.NET TextBox using JavaScript.





Here is the HTML and JavaScript used in the video.

Search :

<asp:TextBox ID="TextBox1" ForeColor="Gray"  runat="server" Width="250px"

                Text="Enter your serach term here" 

                onfocus="ClearWaterMark('Enter your serach term here', this);"

                onblur="CreateWaterMark('Enter your serach term here', this);" >

</asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Search" />

<script type="text/javascript">

    function CreateWaterMark(defaultText, textBoxControl)

    {

        if (textBoxControl.value.length == 0)

        {

            textBoxControl.style.color = "gray";

            textBoxControl.value = defaultText;

        }

    }

    function ClearWaterMark(defaultText, textBoxControl)

    {

        if (textBoxControl.value == defaultText)

        {

            textBoxControl.style.color = "black";

            textBoxControl.value = "";

        }

    }

</script>