[RESOLVED] Password watermark in asp:text box-VBForums
Results 1 to 12 of 12

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

  1. #1

    Thread Starter
    Junior Member Bharathi P's Avatar
    Join Date
    Dec 2013
    Location
    Chennai, India
    Posts
    17

    Resolved [RESOLVED] Password watermark in asp:text box

    Hi,

    Name:  PasswordWatermark.png
Views: 573
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

  2. #2
    PowerPoster Nightwalker83's Avatar
    Join Date
    Dec 2001
    Location
    Adelaide, Australia
    Posts
    13,255

    Re: Password watermark in asp:text box

    Are you using asp.net or asp?
    when you quote a post could you please do it via the "Reply With Quote" button or if it multiple post click the "''+" button then "Reply With Quote" button.
    If this thread is finished with please mark it "Resolved" by selecting "Mark thread resolved" from the "Thread tools" drop-down menu.
    Please consider giving me some rep points if I help you a lot.
    Links to my code examples can now be found on my website: My websites
    Please rate my post if you find it helpful!
    Technology is a dangerous thing in the hands of an idiot! I am that idiot.

  3. #3

    Thread Starter
    Junior Member Bharathi P's Avatar
    Join Date
    Dec 2013
    Location
    Chennai, India
    Posts
    17

    Re: Password watermark in asp:text box

    Hi,

    Am using asp.net.


    Quote Originally Posted by Nightwalker83 View Post
    Are you using asp.net or asp?

  4. #4
    VB Addict Pradeep1210's Avatar
    Join Date
    Apr 2004
    Location
    Inside the CPU...
    Posts
    6,531

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

    Result:

    Name:  img1.png
Views: 360
Size:  20.3 KBName:  img2.png
Views: 358
Size:  19.6 KBName:  img3.png
Views: 353
Size:  19.7 KB
    Pradeep, Microsoft MVP (Visual Basic)
    Please appreciate posts that have helped you by clicking icon on the left of the post.
    "A problem well stated is a problem half solved." Charles F. Kettering

    Read articles on My Blog 101 LINQ Samples JSON Validator XML Schema Validator "How Do I" videos on MSDN VB.NET and C# Comparison Good Coding Practices VBForums Reputation Saver String Enum Super Simple Tetris Game


    (2010-2013)
    NB: I do not answer coding questions via PM. If you want my help, then make a post and PM me it's link. If I can help, trust me I will...

  5. #5

    Thread Starter
    Junior Member Bharathi P's Avatar
    Join Date
    Dec 2013
    Location
    Chennai, India
    Posts
    17

    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 View Post
    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: 360
Size:  20.3 KBName:  img2.png
Views: 358
Size:  19.6 KBName:  img3.png
Views: 353
Size:  19.7 KB
    Attached Files Attached Files

  6. #6
    Super Moderator si_the_geek's Avatar
    Join Date
    Jul 2002
    Location
    Bristol, UK
    Posts
    37,238

    Re: Password watermark in asp:text box

    Quote Originally Posted by Bharathi P View Post
    Hi,

    Am using asp.net.
    Thread moved from the 'ASP, VB Script' forum to the 'ASP.Net' forum

  7. #7
    VB Addict Pradeep1210's Avatar
    Join Date
    Apr 2004
    Location
    Inside the CPU...
    Posts
    6,531

    Re: Password watermark in asp:text box

    Quote Originally Posted by Bharathi P View Post
    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();" />
    Pradeep, Microsoft MVP (Visual Basic)
    Please appreciate posts that have helped you by clicking icon on the left of the post.
    "A problem well stated is a problem half solved." Charles F. Kettering

    Read articles on My Blog 101 LINQ Samples JSON Validator XML Schema Validator "How Do I" videos on MSDN VB.NET and C# Comparison Good Coding Practices VBForums Reputation Saver String Enum Super Simple Tetris Game


    (2010-2013)
    NB: I do not answer coding questions via PM. If you want my help, then make a post and PM me it's link. If I can help, trust me I will...

  8. #8
    VB Addict Pradeep1210's Avatar
    Join Date
    Apr 2004
    Location
    Inside the CPU...
    Posts
    6,531

    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;">&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>
    Pradeep, Microsoft MVP (Visual Basic)
    Please appreciate posts that have helped you by clicking icon on the left of the post.
    "A problem well stated is a problem half solved." Charles F. Kettering

    Read articles on My Blog 101 LINQ Samples JSON Validator XML Schema Validator "How Do I" videos on MSDN VB.NET and C# Comparison Good Coding Practices VBForums Reputation Saver String Enum Super Simple Tetris Game


    (2010-2013)
    NB: I do not answer coding questions via PM. If you want my help, then make a post and PM me it's link. If I can help, trust me I will...

  9. #9

    Thread Starter
    Junior Member Bharathi P's Avatar
    Join Date
    Dec 2013
    Location
    Chennai, India
    Posts
    17

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

  10. #10
    VB Addict Pradeep1210's Avatar
    Join Date
    Apr 2004
    Location
    Inside the CPU...
    Posts
    6,531

    Re: Password watermark in asp:text box

    Quote Originally Posted by Bharathi P View Post
    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>
    Last edited by Pradeep1210; Jan 7th, 2014 at 08:17 AM.
    Pradeep, Microsoft MVP (Visual Basic)
    Please appreciate posts that have helped you by clicking icon on the left of the post.
    "A problem well stated is a problem half solved." Charles F. Kettering

    Read articles on My Blog 101 LINQ Samples JSON Validator XML Schema Validator "How Do I" videos on MSDN VB.NET and C# Comparison Good Coding Practices VBForums Reputation Saver String Enum Super Simple Tetris Game


    (2010-2013)
    NB: I do not answer coding questions via PM. If you want my help, then make a post and PM me it's link. If I can help, trust me I will...

  11. #11

    Thread Starter
    Junior Member Bharathi P's Avatar
    Join Date
    Dec 2013
    Location
    Chennai, India
    Posts
    17

    Resolved Re: [RESOLVED] Password watermark in asp:text box

    Hi,
    Thanks a lot. Its working good.

  12. #12

    Thread Starter
    Junior Member Bharathi P's Avatar
    Join Date
    Dec 2013
    Location
    Chennai, India
    Posts
    17

    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. ]

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Featured


Click Here to Expand Forum to Full Width

Survey posted by VBForums.