1 oct 2009

Password (un)Masking


Windows Vista has a nice option labeled Show characters right below password input fields:

"Show characters" checkbox under password input field

Useit.com recommends it: Stop Password Masking — It’s time to show most passwords in clear text as users type them.
So without further ado, here’s what it looks like on the web:
masking/unmasking passwords demo
This is the HTML code from the example:

<form>
 <label>
  Password: <br />
  <input id="password" name="password" type="password" />
 </label>
 
 <label>
  <input id="showcharacters" name="showcharacters" type="checkbox" /> 
Show characters
 </label>
</form>
And this is the JavaScript jQuery that toggles the masking and unmasking of the password field:
$(document).ready(function() {
 
 $('#showcharacters').click(function() {
  if ($(this).attr('checked')) {
   $('#password').replaceWith('<input id="password" name="password" 
type="text" value="' + $('#password').attr('value') + '" />');
  } else {
   $('#password').replaceWith('<input id="password" name="password"
 type="password" value="' + $('#password').attr('value') + '" />');
  }
 });
 
});
I personally think this is better than the iPhone method of showing only the last typed character, because well… when using a real keyboard I type my passwords faster than I’d be able to read them letter by letter. Which means I type really fast or read really slow.
Either way this would be a better solution to having to type a password two times in order to confirm it.


No hay comentarios: