1 Attachment(s)
[RESOLVED] Password watermark in asp:text box
Hi,
Attachment 109019
How to display password watermark to visible without ***** mark in asp:textbox password field?
I used ajax water mark control in textbox field. Login id control is working perfectly. In password field i set the attribute like textmode="password". So my password control display like ************** in watermark also.
Password watermark also display without *********. When i type the password field then only it will be display like *********.
Please find the attached image and help me solve the problem.
Regards,
Bharathi P
Re: Password watermark in asp:text box
Are you using asp.net or asp?
Re: Password watermark in asp:text box
Hi,
Am using asp.net.
Quote:
Originally Posted by
Nightwalker83
Are you using asp.net or asp?
3 Attachment(s)
Re: Password watermark in asp:text box
Here is one solution.
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
.Solid
{
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.Translucent
{
opacity: .7;
filter: alpha(opacity=70);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
</style>
<script language="javascript" type="text/javascript">
function NormalTB() {
tb = document.getElementById('tbPassword');
tb.className = 'Solid';
}
function WatermarkTB() {
tb = document.getElementById('tbPassword');
if (tb.value == '') tb.className = 'Translucent';
}
</script>
</head>
<body>
<form id="form1">
<span id="passwordBkg" style="position: absolute; z-index: -999999;"> password </span>
<input id="tbPassword" type="password" class="Translucent" onfocus="javascript:NormalTB();" onblur="javascript:WatermarkTB();" />
</form>
</body>
</html>
Result:
Attachment 109147Attachment 109149Attachment 109151
1 Attachment(s)
Re: Password watermark in asp:text box
Hi,
Thanks for your code. Its working fine in HTML control.
You are used HTML input control for password field.
I want it in <asp:textbox id="txtpwd" runat="server" textmode="Password" />.
I have attached my sample code. Please give me the solution for asp.net website.
Regards,
Bharathi P
Quote:
Originally Posted by
Pradeep1210
Here is one solution.
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
.Solid
{
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.Translucent
{
opacity: .7;
filter: alpha(opacity=70);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
</style>
<script language="javascript" type="text/javascript">
function NormalTB() {
tb = document.getElementById('tbPassword');
tb.className = 'Solid';
}
function WatermarkTB() {
tb = document.getElementById('tbPassword');
if (tb.value == '') tb.className = 'Translucent';
}
</script>
</head>
<body>
<form id="form1">
<span id="passwordBkg" style="position: absolute; z-index: -999999;"> password </span>
<input id="tbPassword" type="password" class="Translucent" onfocus="javascript:NormalTB();" onblur="javascript:WatermarkTB();" />
</form>
</body>
</html>
Result:
Attachment 109147Attachment 109149Attachment 109151
Re: Password watermark in asp:text box
Quote:
Originally Posted by
Bharathi P
Hi,
Am using asp.net.
Thread moved from the 'ASP, VB Script' forum to the 'ASP.Net' forum
Re: Password watermark in asp:text box
Quote:
Originally Posted by
Bharathi P
Hi,
Thanks for your code. Its working fine in HTML control.
You are used HTML input control for password field.
I want it in <asp:textbox id="txtpwd" runat="server" textmode="Password" />.
I have attached my sample code. Please give me the solution for asp.net website.
Regards,
Bharathi P
It works exactly same for server side control as well, since it is ultimately renderred in the browser as html input control.
I just had to replace the html input control with asp.net textbox control; rest everything being same.
Code:
<asp:textbox ID="tbPassword" runat="server" TextMode="Password" CssClass="Translucent" onfocus="javascript:NormalTB();" onblur="javascript:WatermarkTB();" />
Re: Password watermark in asp:text box
Here is a better version of the same. It uses inline javascript and eleminates the need for hardcoded ID value. Much lesser code than the earlier version.
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
.Solid
{
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.Translucent
{
opacity: .7;
filter: alpha(opacity=70);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
</style>
</head>
<body>
<form id="form1" runat="server">
<span id="passwordBkg" style="position: absolute; z-index: -999999;"> password</span>
<asp:TextBox ID="txtpwd" runat="server" TextMode="Password" CssClass="Translucent" onfocus="javascript:this.className = 'Solid';" onblur="javascript:if (this.value == '') this.className = 'Translucent';" />
</form>
</body>
</html>
Re: Password watermark in asp:text box
Hi,
Thank you very much. Its working good. But there is some problem when I have Background-color in div tag.
ie:
<div style="background:#d7d7d7; border-bottom:solid 1px #808080;">
<span id="passwordBkg" style="position: absolute; z-index: -999999;"> Password </span>
<asp:TextBox ID="tbPassword" runat="server" TextMode="Password" CssClass="Translucent" onfocus="javascript:NormalTB();" onblur="javascript:WatermarkTB();" />
</div>
when I use background color in div then that will not working. But definitely I need background color in div tag.
Please help me to solve the problem
Quote:
Originally Posted by
Pradeep1210
Here is a better version of the same. It uses inline javascript and eleminates the need for hardcoded ID value. Much lesser code than the earlier version.
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
.Solid
{
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.Translucent
{
opacity: .7;
filter: alpha(opacity=70);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
</style>
</head>
<body>
<form id="form1" runat="server">
<span id="passwordBkg" style="position: absolute; z-index: -999999;"> password</span>
<asp:TextBox ID="txtpwd" runat="server" TextMode="Password" CssClass="Translucent" onfocus="javascript:this.className = 'Solid';" onblur="javascript:if (this.value == '') this.className = 'Translucent';" />
</form>
</body>
</html>
Re: Password watermark in asp:text box
Quote:
Originally Posted by
Bharathi P
Hi,
Thank you very much. Its working good. But there is some problem when I have Background-color in div tag.
ie:
<div style="background:#d7d7d7; border-bottom:solid 1px #808080;">
<span id="passwordBkg" style="position: absolute; z-index: -999999;">*Password </span>
<asp:TextBox ID="tbPassword" runat="server" TextMode="Password" CssClass="Translucent" onfocus="javascript:NormalTB();" onblur="javascript:WatermarkTB();" />
</div>
when I use background color in div then that will not working. But definitely I need background color in div tag.
Please help me to solve the problem
In that case, it would be easier to set a background image for the password textbox, instead of trying to set the transparency to show the background span.
Try this:
1. Make an image of whatever way you want the textbox background to show. (You can just take a screenshot and cut that textbox area where "password" is written).
2. Lets say the image name is pwdBkg.png saved in images folder.
3. Now the following code should work:
HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
.Solid
{
background: #ffffff;
}
.Translucent
{
background: #ffffff url(images/pwdBkg.png) left no-repeat;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="background: #d7d7d7; border-bottom: solid 1px #808080;">
<asp:TextBox ID="txtpwd" runat="server" TextMode="Password" CssClass="Translucent" onfocus="javascript:this.className = 'Solid';" onblur="javascript:if (this.value == '') this.className = 'Translucent';" />
</div>
</form>
</body>
</html>
Re: [RESOLVED] Password watermark in asp:text box
Hi,
Thanks a lot. Its working good.:thumb:
Re: Password watermark in asp:text box
Hi,
Where I can click * icon on the left of the post for appreciate posts.
[Please appreciate posts that have helped you by clicking * icon on the left of the post. ]