Create Watermark TextBox using JavaScript in ASP .Net.

Hi everyone,

In this post, i'm going to share to code snippet for create watermark in a asp.net textbox using JavaScript.

This example is simple and understandable code-sample using JavaScript and asp.net c#

Table of Contents

1. In the 1st step, code-sample for aspx page.
2. In the 2nd step, code-sample for C# (.cs page).
3. In the 3rd step, code-sample for JavaScript.

In the 1st step, code-sample for view in asp.net page i.e. .aspx

<asp:TextBox ID="txtURL" runat="server" Width="300px" Text = "http://aspdotnetblogspot.blogspot.in/"  onblur = "WaterMarktext(this, event);" onfocus = "WaterMarktext(this, event);"> </asp:TextBox>

In the 2nd step, code-sample for c# .net page i.e. .aspx.cs

if (!Page.IsPostBack)

{

    txtURL.Attributes.Add("onblur", "WaterMarktext(this, event);");

    txtURL.Attributes.Add("onfocus", "WaterMarktext(this, event);");

}

In the 3rd step, code-sample for JavaScript page i.e. .aspx page

<script type = "text/javascript">

    var varText = "http://aspdotnetblogspot.blogspot.in/";

    function WaterMarktext(txt, evt) {

        if (txt.value.length == 0 && evt.type == "blur") {

            txt.style.color = "green";

            txt.value = varText;

        }

        if (txt.value == defaultText && evt.type == "focus") {

            txt.style.color = "green";

            txt.value = "";

        }

    }

</script>