Travis Collins

Dramatic Password Reveal - in ASP.NET

Jeff Atwood recently blogged about a nice feature of Vista, when you are entering your wireless network key.  This feature provides the user with a checkbox to toggle the obfuscation of the wireless key being entered.

As Jeff mentions, this is a nice technique, and one that I have recently investigated for my own web applications. However, doing this on the web is a little trickier because you aren't able to change the type attribute of an input element using JavaScript.  Shown below, I have developed a way to accomplish the same result.

First, surround your password text field with a simple span

<span id="spanPass"><asp:TextBox ID="Password" runat="server" TextMode="Password" CssClass="txt" /></span>

Add a checkbox to toggle the password obfuscation

<input type="checkbox" id="chkReveal" onclick="toggleReveal();" /><label for="chkReveal">Reveal my password</label>

 

Finally a bit of JavaScript, and we're done

<script type="text/javascript">
    function toggleReveal()
    {
        var chkReveal = $get('chkReveal');
        var txt = $get('<%= this.Login1.FindControl("Password").ClientID %>');
        var spanPass = $get('spanPass');
        
        if (chkReveal.checked)
            spanPass.innerHTML = '<input type="text" name="' + txt.name + '" id="' + txt.id + '" value="' + txt.value + '" class="'+ txt.className +'" />';
        else
            spanPass.innerHTML = '<input type="password" name="' + txt.name + '" id="' + txt.id + '" value="' + txt.value + '" class="'+ txt.className +'" />';
    }
</script>

Note I am using the handy $get which comes with ASP.NET AJAX.  If you are not using this framework, you can just as easily replace $get with document.getElementById(). 

This small JavaScript method simply rewrites the contents of the span tag with a new input control, copying the previous name, id, value, and class values.  The only thing that gets changed is the type attribute.  Now I know what you're thinking, and no, JavaScript is not able to change the type attribute directly.

I have tested this in IE6, IE7, Firefox and Safari.  It works as expected in all of these browsers.

Posted: Feb 13 2008, 04:49 PM by travistx | with 4 comment(s)
Filed under: , , ,

Comments

rajbk said:

Here is another way that should work:

<html>

<script type="text/javascript">

function togglePasswordVisibility(chkToggle) {

var inputPassword = document.getElementById("inputPassword");

var spanPasswordId = inputPassword.id + "__span";

var spanPassword = document.getElementById(spanPasswordId);

if (!spanPassword) {

spanPassword = document.createElement("SPAN");

spanPassword.id = spanPasswordId;

inputPassword.parentNode.insertBefore(spanPassword, inputPassword);

}

spanPassword.innerHTML  = inputPassword.value;

if (chkToggle.checked) {

inputPassword.style.display = "none";

spanPassword.style.display = "inline";

}

else {

inputPassword.style.display = "inline";

spanPassword.style.display = "none";

}

}

</script>

<body>

<form method="post">

<input id="chkToggle" type="checkbox" onclick="togglePasswordVisibility(this)" />

<input id="inputPassword" type="password"/>

</form>

</body>

</html>

-Raj

PS: It is possible, using js, to change the type attribute in Firefox.

# February 13, 2008 10:56 PM

pickle said:

Incluso asГ­      

http://www.shampes.com/      

kiel

# September 3, 2011 8:26 AM

BorErurbtum said:

<a href=tagawayfacts.com/>tag away</a>  anti-inflammatory and exfoliant. Additionally, it can improve the there are a lot of men who are getting more cautious about their skin that goals your beauty concerns, compliments your skin care system, and to survive, so does your skin. The outer layer of skin is actually habits and other lifestyle accordingly. After consulting with a

# January 8, 2013 1:20 PM

http://ruezee.com/ said:

Absolutely no man or woman may all your cry, along with person who is normally picked up‘t force you to cry. rueducommerce http://ruezee.com/

# April 12, 2013 3:02 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)