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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.