Create Watermark TextBox using JavaScript in ASP .Net.

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> 
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^