Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.net set watermark text for password textbox in JavaScript

May 2, 2012
Introduction

In this article I will explain how to set watermark text for password textbox using JavaScript in asp.net.

Description:

In previous article I explained how to set watermark text for textbox using JavaScript. In one situation I got requirement like implement watermark text for password textbox which contains TextMode=”Password”. After did some research I realized that we don’t have a chance to implement watermark text for password textbox because it won’t support in all the browsers. 

To implement this requirement here I did some hack in JavaScript like taking two textboxes and showing password textbox based on requirement check below code to implement this one.

Open visual studio create new application and design your aspx page like this 


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Watermark Textbox for Password Textbox Using JavaScript</title>
<script language="javascript" type="text/javascript">
function WaterMark(objtxt, event) {
var defaultText = "Enter Username Here";
var defaultpwdText = "Enter Password Here";
// 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="Enter Username Here" 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="Enter Password Here" runat="server" onfocus="WaterMark(this, event);" Width="150px" ForeColor="Gray" />
<asp:TextBox ID="txtPwd" TextMode="Password" Text="Enter Password Here" runat="server" Width="150px" Style="display:none" onblur="WaterMark(this, event);"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Demo


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

8 comments :

Anonymous said...

Very useful information. Thank you

kapil said...

very nice

Jignesh Dodia said...

great work, very useful

Ranjan said...

I try ur code but this error is coming
can u help how to debug this code
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)

Suresh Dasari said...

@Ranjan...
That is the problem with your aspx page please check your aspx starting of the page code...

Nityanand Yadav said...
This comment has been removed by a blog administrator.
thala said...

When im clicking password textbox errors throws in following code:
if (objtxt.id == "MainContent_SupplierLogin1_txtTempPwd") {
objtxt.style.display = "none";
document.getElementById("<%= txtPwd.ClientID %>").style.display = "";
document.getElementById("<%= txtPwd.ClientID %>").focus();
}
Error Message:
Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined

In this line of Code:
document.getElementById("<%= txtPwd.ClientID %>").style.display = "";

Unknown said...

Hi i want my text box filled from code behind by DataTable..and this should be water marked..
ie TextBox1.Text= dt.rows[0]["col"].ToString()
now suppose textbox is displaying value "Hello" which is at 0 index of column name col in dt. i want this hello in water mark, so that if user change text then it should get dissappear..

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.