Solved

onKeyPress - replace text

Posted on 2011-03-16
15
659 Views
Last Modified: 2012-05-11
I have the following controls

 <asp:TextBox ID="Password" runat="server" TextMode="SingleLine"  Text="Password" >
</asp:TextBox>

<asp:HiddenField ID="uxHiddenPassword" runat="server" />

The initial value of the text box says "PASSWORD" because i have no labels on the page

however, when someone starts typing a password, i want to **** out this password
I pressume once i star it out, then this actually changes the value (its a registration form so i need to preserve their password to use for registering)
i.e. if i * it out, i dont want their password to be a bunch of stars, so i figure i have to record this in a hidden field and use that value when doing registering?

so points go to the person to who gives me the javascript that can do this

i.e. on keypress updated hidden field then replace textbox value with *
Thanks
0
Comment
Question by:websss
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
  • 3
  • +3
15 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35146836
0
 

Author Comment

by:websss
ID: 35146867
Thanks

But could you explain a little more please
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35146873
just use this

 <asp:TextBox ID="Password" runat="server" TextMode="SingleLine"  placeholder="Password">
</asp:TextBox>
0
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 

Author Comment

by:websss
ID: 35146907
thanks

but i have no idea how that solves my problem of *** out the password and it being available to for the registering process server side
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35146934
<asp:TextBox ID="Password" runat="server" TextMode="SingleLine"  placeholder="Enter Password">
</asp:TextBox>

place holder will simply show the 'Enter Password' text if there is no password entered in this field. But when user enters the text in this field, it will be processed as normal password field
0
 
LVL 10

Expert Comment

by:John Claes
ID: 35146991
@ websss: :
The solution of gurvinder372 gives you a clean no scripting solution.
The value is still useable as normal and the user will see the PlaceHolder attribute value when no value is given to the password.
when the password is filled in the user will see only the ***** but the textbox will give you the entered Password

regads

poor beggar
0
 

Author Comment

by:websss
ID: 35147012
thanks both,
I wish that worked but it doesn't

no placeholder text, and password isn't hashed (it's set as singleline so i'm not suprised)
do i need a 3rd party library to acheive this or something?
0
 
LVL 9

Expert Comment

by:jkofte
ID: 35147033
you can just change textmode = "password" this will do it.
0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 35147073
Try this ..little bit tricky
use two textboxes and hide one after key press

<asp:TextBox ID="Password1" runat="server" Text="Password" TextMode="SingleLine" style="display:block" onKeypress="change()"></asp:TextBox>
                  <asp:TextBox ID="Password2" runat="server" TextMode="Password"  style="display:none"></asp:TextBox>
                  

Javascript

            <script language="javascript" type="text/javascript">
        function change()
        {
      
         document.getElementById('Password1').style.display = "none"  ;
         document.getElementById('Password2').style.display = "block"  ;
      
        }
            </script>
0
 
LVL 1

Expert Comment

by:ChouhanR
ID: 35147328
Hey take this complete code its working fine... javascript + html

but one question i have is why dont you make the text mode as password.,, which can simplfy things to some extend..

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript" type="text/javascript" >
    function copyText(e)
    {
    var hdnfield=document.getElementById('uxHiddenPassword');
    var textBox=document.getElementById('Password');
    var c=String.fromCharCode(e.keyCode);
    hdnfield.value=hdnfield.value+c;
    e.keyCode=42;
    alert(hdnfield.value);
    }
   
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="Password" runat="server" TextMode="SingleLine" Text="text" onkeypress="copyText(event)"></asp:TextBox>
    <asp:HiddenField ID="uxHiddenPassword" runat="server" />
    </div>
    </form>
</body>
</html>
0
 

Author Comment

by:websss
ID: 35153808
ChouhanR, your example looks right, so I'll try this
The reason I don't use the password property on the text box is because I need it to say 'password' initially
I.e. The label is inside the text box and is I set itto password it's a bunch of ******** instead of readable text
Does that make sense?
Thank
0
 
LVL 10

Expert Comment

by:John Claes
ID: 35156963
websss:  

using the answer of gurvinder372 and jkofte combined :

<asp:TextBox ID="Password" runat="server" TextMode="password"  placeholder="Password">
</asp:TextBox>

This shows the placeHolder when empty
and **** when not empty.
the placeholders is dissapeared when focussing the textbox

poor beggar
0
 

Author Comment

by:websss
ID: 35348795
thanks poor beggar

how sure are you that the PLACEHOLDER thihng works with asp.net as i cannot get it working
?
0
 
LVL 10

Accepted Solution

by:
John Claes earned 500 total points
ID: 35349004
I've done some googling for you


This works in Chrome and any other browser that supports placeholder text in HTML5
But, it doesn't work in 3.5 and earlier of Firefox, and obviously IE8, and possibly other browsers.

So you're still not being helped.....


using JQuery (Third Party)
http://labs.thesedays.com/projects/jquery/clearfield/

using Ajax (Third Party)
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/TextBoxWatermark/TextBoxWatermark.aspx

No thirt Party
http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-%28IE-Compatible%29.aspx
0
 

Author Closing Comment

by:websss
ID: 35510489
Thanks
Went for a different solution after

I had a label absolutly positions which is hidden with JS when starting typing
0

Featured Post

Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question