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...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book