[RESOLVED] Password watermark in asp:text box

**Bharathi P** · Jan 3rd, 2014, 05:30 AM

Hi,

Name: PasswordWatermark.png
Views: 2298
Size: 15.6 KB

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

**Nightwalker83** · Jan 4th, 2014, 07:25 PM

Are you using asp.net or asp?

**Bharathi P** · Jan 5th, 2014, 10:33 PM

Hi,

Am using asp.net.

Originally Posted by Nightwalker83

Are you using asp.net or asp?

**Pradeep1210** · Jan 6th, 2014, 10:35 AM

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;">&nbsp;password </span>
    <input id="tbPassword" type="password" class="Translucent" onfocus="javascript:NormalTB();" onblur="javascript:WatermarkTB();" />
    </form>
</body>
</html>

Result:

Name: img1.png
Views: 1476
Size: 20.3 KB

Name: img2.png
Views: 1369
Size: 19.6 KB

Name: img3.png
Views: 1364
Size: 19.7 KB

**Bharathi P** · Jan 6th, 2014, 11:14 PM

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

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;">&nbsp;password </span>
    <input id="tbPassword" type="password" class="Translucent" onfocus="javascript:NormalTB();" onblur="javascript:WatermarkTB();" />
    </form>
</body>
</html>

Result:

**Pradeep1210** · Jan 7th, 2014, 06:06 AM

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();" />

**si_the_geek** · Jan 7th, 2014, 03:46 AM

Originally Posted by Bharathi P

Hi,

Am using asp.net.

Thread moved from the 'ASP, VB Script' forum to the 'ASP.Net' forum

**Pradeep1210** · Jan 7th, 2014, 06:13 AM

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;">&nbsp;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>

**Bharathi P** · Jan 7th, 2014, 07:10 AM

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

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;">&nbsp;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>

Thread: [RESOLVED] Password watermark in asp:text box

Thread Tools

Display

Hybrid View

[RESOLVED] Password watermark in asp:text box

Re: Password watermark in asp:text box

Re: Password watermark in asp:text box

Re: Password watermark in asp:text box

Re: Password watermark in asp:text box

Re: Password watermark in asp:text box

Re: Password watermark in asp:text box

Re: Password watermark in asp:text box

Re: Password watermark in asp:text box

Posting Permissions