onKeyPress - replace text

I have the following controls

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

<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 *
Who is Participating?
John ClaesConnect With a Mentor Senior .Net Consultant & Technical AnalistCommented:
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)

using Ajax (Third Party)

No thirt Party
websssAuthor Commented:

But could you explain a little more please
7 new features that'll make your work life better

It’s our mission to create a product that solves the huge challenges you face at work every day. In case you missed it, here are 7 delightful things we've added recently to monday to make it even more awesome.

Gurvinder Pal SinghCommented:
just use this

 <asp:TextBox ID="Password" runat="server" TextMode="SingleLine"  placeholder="Password">
websssAuthor Commented:

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
Gurvinder Pal SinghCommented:
<asp:TextBox ID="Password" runat="server" TextMode="SingleLine"  placeholder="Enter Password">

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
John ClaesSenior .Net Consultant & Technical AnalistCommented:
@ 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


poor beggar
websssAuthor Commented:
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?
you can just change textmode = "password" this will do it.
Pratima PharandeCommented:
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>


            <script language="javascript" type="text/javascript">
        function change()
         document.getElementById('Password1').style.display = "none"  ;
         document.getElementById('Password2').style.display = "block"  ;
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);
    <form id="form1" runat="server">
    <asp:TextBox ID="Password" runat="server" TextMode="SingleLine" Text="text" onkeypress="copyText(event)"></asp:TextBox>
    <asp:HiddenField ID="uxHiddenPassword" runat="server" />
websssAuthor Commented:
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?
John ClaesSenior .Net Consultant & Technical AnalistCommented:

using the answer of gurvinder372 and jkofte combined :

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

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

poor beggar
websssAuthor Commented:
thanks poor beggar

how sure are you that the PLACEHOLDER thihng works with asp.net as i cannot get it working
websssAuthor Commented:
Went for a different solution after

I had a label absolutly positions which is hidden with JS when starting typing
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.