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.
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>
var chkReveal = $get('chkReveal');
var txt = $get('<%= this.Login1.FindControl("Password").ClientID %>');
var spanPass = $get('spanPass');
spanPass.innerHTML = '<input type="text" name="' + txt.name + '" id="' + txt.id + '" value="' + txt.value + '" class="'+ txt.className +'" />';
spanPass.innerHTML = '<input type="password" name="' + txt.name + '" id="' + txt.id + '" value="' + txt.value + '" class="'+ txt.className +'" />';
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().
I have tested this in IE6, IE7, Firefox and Safari. It works as expected in all of these browsers.