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 Email
|
|||
8 comments :
Very useful information. Thank you
very nice
great work, very useful
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. <% ... %>)
@Ranjan...
That is the problem with your aspx page please check your aspx starting of the page code...
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 = "";
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..
Note: Only a member of this blog may post a comment.