VileWorks

Password (un)Masking

javascript jquery security usability web design web development

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

Windows Vista "Show characters" checkbox under a password field

And Useit.com recommends it: 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: unmasking the password field

This is the HTML code from the example:

<form>
	<label>
		Password:
		<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.

• Tweet This!
• Share this on Facebook
• Share this on del.icio.us

• 

13 Comments.

13 Comments

1. Narin
   4 months ago #
   

   I’ve try your code but it’s not work. Do I have to do more?
   Here’s my code:
   

   $(‘#showcharacters’).click(function() {
   if ($(this).attr(‘checked’)) {
   $(‘#password’).replaceWith(”);
   } else {
   $(‘#password’).replaceWith(”);
   }
   });

   Password:

   Show characters?

   Reply
2. Narin
   4 months ago #
   

   Why it don’t show all the code compleatly? (in the above reply)

   Reply
3. Stefan
   4 months ago #
   

   @Narin: Because it uses jQuery, a couple of potential reasons would be:

   1. You have to have the jQuery JavaScript library included.
   2. The JavaScript part should run on $(document).ready. I updated the article above and included that part in the JavaScript code.

   Also, you can check the source code of the example file at http://www.vileworks.com/projects/unmask_password.html — that has the jQuery library included from Google.

   Reply
4. Tom
   4 months ago #
   

   I agree — the iPhone method, while nice, is less useful for faster typing.

   Reply
5. Elvis
   4 months ago #
   

   Nice. Slick and easy. I will use that for every password firld from now on!

   Greetings from Germany

   Reply
6. errata
   4 months ago #
   

   Elegant way:

   use this:
   $(‘#password’).attr(“type”, “text”);
   and
   $(‘#password’).attr(“type”, “password”);

   sample:

   $(document).ready(function() {
   
       $('#showcharacters').click(function() {
           if ($(this).attr('checked')) {
               $('#password').attr("type", "text");
           } else {
               $('#password').attr("type", "password");
           }
       });
   
   });
   

   Reply
7. micael
   4 months ago #
   

   @errata: exact… replaceWith no necessary, attr type replace is more simple and elegant.

   Reply
8. Stefan
   4 months ago #
   

   @errata and @micael: Agreed, it is more elegant. And that was how I initially went about it. But unfortunately changing the type attribute is something most browsers won’t allow.

   So replaceWith() was the best thing to go around that.

   Reply
9. Narin
   4 months ago #
   

   @Stefan: I’ve got it! Thank you very much for your advise.

   Reply
10. Narin
    4 months ago #
    

    @errata: I’ve try your code on Visual Studio 2008 and it say “Microsoft JScript runtime error: Exception throw and not caught” the error is “type property can’t be change” but the original code is work fine. I don’t know that another tools show error like this or not?

    Reply
11. errata
    4 months ago #
    

    the true is i didn’t tested my code sorry for abaout that.

    but someting else:

    inserting html code, is not the best way…

    use:

    $(myInput) = document.createElement(‘input’);

    $(myInput).attr({
    id: “password”,
    type: “password”,
    name: “password”,
    value: “exapmle”,
    class: “passClass”
    });

    thats way more OO

    ps: sory for my english

    Reply
12. Student Brands
    3 months ago #
    

    Thanks for the great info, we hope to use it on our website: http://www.studentbrands.co.za Which is a free student portal, everything free for students

    Reply
13. Chris Rault
    1 month ago #
    

    We’ve also created a jQuery plugin to allow you to easily add password masking to any of your sites :)

    You can read more and download here:
    http://www.prothemer.com/blog/2009/07/02/new-jquery-plugin-targeting-usability-for-password-masking-on-forms/

    Reply

Leave a Reply