Thursday, 3 May 2012

How to put Watermark for textboxes | Watermark for Username and Password | Watermark in Javascript

                      Hi Friends, in this article I will explain about Watermark for Username and Password in JavaScript.
I already explained in the previous articles about Marquee tag or How to Scroll Text From left to right or How to Move the Text in HTML,C#/VB.NET:Save the generated pdf directly to the server directory folder without user prompt in ASP.NET and How to open PDF File in Adobe Reader, not in Browser in ASP.NET using C#/VB.NET
                      We may see Watermark textboxes  in so many sites. Suppose we take the twitter  site in login page and signup page it contains Watermark textboxes  .
                             Watermark is not working properly for the password if we take the Textmode as Password(TextMode="Password").For  that i take the extra textbox txtTempPwd and write the code as following.
In previous post i explained about how to create ASP.NET website.
Take one web page(.aspx page)
Copy and Paste the below code in your web page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Watermark Textboxs for username and Password  Using JavaScript</title>
<script language="javascript" type="text/javascript">
    function WaterMark(objtxt, event) {
        var defaultText = "Username";
        var defaultpwdText = "Password";
        // Condition to check textbox length and event type
        if (objtxt.id == "txtUserName" || objtxt.id == "txtPwd") {
            if (objtxt.value.length == 0 & event.type == "blur") {
                //if condition true then setting text color and default text in textbox
                if (objtxt.id == "txtUserName") {
                    objtxt.style.color = "Gray";
                    objtxt.value = defaultText;
                }
                if (objtxt.id == "txtPwd") {
                    document.getElementById("<%= txtTempPwd.ClientID %>").style.display = "block";
                    objtxt.style.display = "none";
                }
            }
        }
        // Condition to check textbox value and event type
        if ((objtxt.value == defaultText || objtxt.value == defaultpwdText) & event.type == "focus") {
            if (objtxt.id == "txtUserName") {
                objtxt.style.color = "black";
                objtxt.value = "";
            }
            if (objtxt.id == "txtTempPwd") {
                objtxt.style.display = "none";
            document.getElementById("<%= txtPwd.ClientID %>").style.display = "";
                document.getElementById("<%= txtPwd.ClientID %>").focus();
            }
        }
    }
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td><b>UserName:</b></td>
<td>
<asp:TextBox ID="txtUserName" runat="server" Text="Username" Width="150px" ForeColor="Gray" onblur = "WaterMark(this, event);" onfocus = "WaterMark(this, event);" />
</td>
</tr>
<tr>
<td><b>Password:</b></td>
<td>
<asp:TextBox ID="txtTempPwd" Text="Password" runat="server" onfocus="WaterMark(this, event);" Width="150px" ForeColor="Gray" />
<asp:TextBox ID="txtPwd" TextMode="Password" Text="Password" runat="server" Width="150px" Style="display:none" onblur="WaterMark(this, event);"/>
</td>
</tr>
</table>
</form>
</body>
</html>


Then the output like below.
when we click on the textboxes then the text will disappear like below.
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook pageAspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter  on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on  RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog  for more articles."
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook page Aspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog for more articles."

2 comments:

  1. Hi Roja,
    Really nice..
    Thanks for sharing…

    ReplyDelete
  2. i have one doubt,here we using two textbox for password,what purpose we used two box,then how is possible to view one textbox only after execution

    ReplyDelete

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.