Password un-masking: Show passwords in clear text

by

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/
[embed_snipt:uUja2]

And this is the JavaScript jQuery that toggles the masking and unmasking of the password field:
http://snipt.org/uUij0/
[embed_snipt: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.

21 thoughts on “Password un-masking: Show passwords in clear text”

  1. 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?

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

});

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

  14. 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. @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. 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. Pingback: 45 Fresh Useful JavaScript and jQuery Techniques and Tools | DX Blog
  20. Pingback: 45 Fresh Useful JavaScript and jQuery Techniques and Tools | Smashing Magazine

Comments are closed.