Password (un)Masking
javascript jquery security usability web design web developmentWindows 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.
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?
4 months ago #
Why it don’t show all the code compleatly? (in the above reply)
4 months ago #
@Narin: Because it uses jQuery, a couple of potential reasons would be:
$(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 months ago #
I agree — the iPhone method, while nice, is less useful for faster typing.
4 months ago #
Nice. Slick and easy. I will use that for every password firld from now on!
Greetings from Germany
4 months ago #
Elegant way:
use this:
$(‘#password’).attr(“type”, “text”);
and
$(‘#password’).attr(“type”, “password”);
sample:
4 months ago #
@errata: exact… replaceWith no necessary, attr type replace is more simple and elegant.
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.4 months ago #
@Stefan: I’ve got it! Thank you very much for your advise.
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?
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
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
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/