"Show password as text" control

Question

I have a usual login form consisting of two input fields, one for login, one for password. I am currently trying to add a control that will show entered password as plain text, so user can check it for typos.

The problem is that browsers (at least Firefox) do not allow dynamic changing of type attribute of input fields, so I cannot just change type="password" to type="text". Another problem is that browsers do not allow to get value of password field, so I can't create a new input type="text" and set its value to the password's one. I've seen several different approaches to this task, including this one, but they are working only if the password is typed and fail when browser autofills the password.

So, any suggestions to do this are welcome. I am using jQuery.

Answer 1

If I may, I don't think it's a great idea to show the password in text, for the following reasons:

1. It's not commonly done, so it will be confusing to the user
2. It means you are open to over-the-shoulder viewing of the password

I also think, if you just want to help users avoid typos, give them more chances before the password is disabled. I think the typical "3" that most sites implement is not really required, I'd suggest "10" attempts, or perhaps "5", if you wish to be really conservative, is quite acceptable. Just count it down for them, and let them resolve typos on their own.

Just my humble opinion.

Answer 2

You can do something like this:

<input type="password" id="password">
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password

Answer 3

I have never tried this myself but can't you just access the value property of the element?

if you have something like...

<input id="pw" name="pw" type="password" />

Then in JavaScript / jQuery...

var pass = document.getElementById('pw').value;

$('pw').val()