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 1 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
Leave a Comment

(required) 

(required) 

(optional)

(required)