Solved

onKeyPress - replace text

Posted on 2011-03-16
15
645 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
  • 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
 

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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now