Password un-masking:
Show them in clear text

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

“Show characters” checkbox under a password field in Windows

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:

And this is the JavaScript jQuery that toggles the masking and unmasking of the password field:

Update: If you want to use this technique on a live website, someone in the comments has augmented the original implementation into a jQuery plugin: http://pastie.org/912524

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 too fast or read too slow. Either way this would be a better solution to having to type a password two times in order to confirm it.

21 Comments + Add Comment

Narin 1 October 2009 at 7:25 am

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
Narin 1 October 2009 at 7:29 am

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

Reply
Stefan 1 October 2009 at 7:52 am
@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
Tom 1 October 2009 at 9:32 am

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

Reply
Elvis 1 October 2009 at 1:47 pm

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

Greetings from Germany

Reply

errata 1 October 2009 at 2:22 pm

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");
        }
    });

});

micael 1 October 2009 at 3:04 pm

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

Reply
Stefan 1 October 2009 at 5:12 pm

@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
Narin 2 October 2009 at 8:08 am

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

Reply
Narin 2 October 2009 at 10:05 am

@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
errata 2 October 2009 at 10:37 am

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
Student Brands 4 November 2009 at 9:50 pm

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
Chris Rault 30 December 2009 at 10:54 am

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
Adam Clark 15 March 2010 at 1:16 pm

A useful thing this password un-masking, however if javascript is off then you still encounter a checkbox on the page which now does nothing. I think a little tweaking is needed so the checkbox is created by the script instead, minimizing any usability problems from the outset.

Otherwise a great tutorial.

Reply
Sam 15 March 2010 at 5:52 pm

@Adam Clark
To code for that. Just have the checkbox hidden onload by css, only displayed if JS is present. Less bulky than having the JS create the whole object and inserting it into the DOM onLoad.
Good call though.

Reply
Logic 10 April 2010 at 8:00 am

Augmented the original implementation into a jQuery plugin. For the HTML just leave off the checkbox, the plugin will create that. All that one needs to do is point to the password input.

Source code, licensed under WTFPL.
http://pastie.org/912524

Reply
45 Fresh Useful JavaScript and jQuery Techniques and Tools « TMHs Web Tips 19 May 2010 at 6:22 am

[...] Password (un)Masking JavaScript jQuery that toggles the masking and unmasking of the password field. [...]

Reply
45 Fresh Useful JavaScript and jQuery Techniques and Tools | DX Blog 28 May 2010 at 11:43 am

[...] Password (un)Masking JavaScript jQuery that toggles the masking and unmasking of the password field. [...]

Reply
boyana 28 June 2012 at 5:54 pm

thank you Stefan! :)

Reply
Thilak 24 December 2012 at 2:14 pm

IE seems to have some troubles with this method! Why am I not surprised!

Reply
- Stefan Matei 12 January 2013 at 1:08 am
  
  Hi Thailak! It was working in 2009 when I wrote it and it still appears to be working fine in my IE 10. What IE version are you using?
  
  Reply

Password un-masking:
Show them in clear text

Popular Articles

Browse by Tag

Join us on Facebook

Meta

Password un-masking: Show them in clear text

Popular Articles

Browse by Tag

Join us on Facebook

Meta

Password un-masking:
Show them in clear text