Password un-masking: Show passwords 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:


http://snipt.org/uUja2/

And this is the JavaScript jQuery that toggles the masking and unmasking of the password field:
http://snipt.org/uUij0/

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 showing passwords in clear text 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 than having to type a password two times in order to confirm it.

Posted in blog Tagged with: , , , , ,
19 comments on “Password un-masking: Show passwords in clear text
  1. Narin says:

    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?

  2. Narin says:

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

  3. Stefan says:

    @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.

  4. Tom says:

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

  5. Elvis says:

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

    Greetings from Germany

  6. errata says:

    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");
            }
        });
    
    });
    
  7. micael says:

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

  8. Stefan says:

    @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.

  9. Narin says:

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

  10. Narin says:

    @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?

  11. errata says:

    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

  12. 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

  13. Chris Rault says:

    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/

  14. Adam Clark says:

    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.

  15. Sam says:

    @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.

  16. Logic says:

    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

  17. boyana says:

    thank you Stefan! :)

  18. Thilak says:

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

2 Pings/Trackbacks for "Password un-masking: Show passwords in clear text"
  1. 45 Fresh Useful JavaScript and jQuery Techniques and Tools | DX Blog says:

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

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