8

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.

n1313
  • 20,555
  • 7
  • 31
  • 46

7 Answers7

28

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
Gumbo
  • 643,351
  • 109
  • 780
  • 844
  • It works! Unbelievable. It seems that my problem was in jQuery that I am using. By some reason it did not allow me to do this trick. – n1313 Sep 05 '09 at 12:10
  • 4
    More than likely. I have confirmed that it doesn't work at all in IE. – Guffa Sep 05 '09 at 12:36
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.

Noon Silk
  • 54,084
  • 6
  • 88
  • 105
  • 1
    By default the password is hidden, of course. If user is clicking the link labeled "Show me the letters what I just typed into that password field because I am not sure that I typed them right", chances are high that he understands what he is doing and he knows what will happen next :) – n1313 Sep 05 '09 at 11:57
  • 3
    Even programs where security is very important like TrueCrypt and password safe have features for enabling the password to be shown. Especailly in situations where the user could be using a very long or complex password/passphrase, being able to see the password can be a very good feature. I agree with N1313 that the person clicking on it would must likely check for shoulder surfers before clicking on the button to reveal the password. – Kibbee Sep 05 '09 at 12:19
  • Kibbee: I don't disagree. Each to his own. – Noon Silk Sep 05 '09 at 12:29
  • 2
    Instead of limiting the number of responses, you could add a sleep for 2-3 seconds before responding that the password is wrong. It's a very tolerable wait for a human, but it greatly reduces the efficiency of any attempts to brute force the password. – Guffa Sep 05 '09 at 12:42
  • Or better yet, use a secure, slow hashing function like scrypt so that *even if your password database is hacked* it would take thousands of years to get your users passwords even on optimized GPUs. –  Mar 18 '17 at 14:08
1

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()
Fraser
  • 15,275
  • 8
  • 53
  • 104
0
$('.show-password').change(function() {
  if ($("#form-fields_show-password").attr('checked')) {
    var showValue = $('#form-fields_password').val();
    var showPassword = $('<input type="text" size="50" required="required" name="form-  fields[password]" id="form-fields_password" class="password required"   value="'+showValue+'">');
    $('#form-fields_password').replaceWith(showPassword);
  } else {
    var hideValue = $('#form-fields_password').val();
    var hidePassword = $('<input type="password" size="50" required="required" name="form-fields[password]" id="form-fields_password" class="password required" value="'+hideValue+'">');
    $('#form-fields_password').replaceWith(hidePassword);
  }
});

Something like this will find the input area, and store the value in a variable called showValue. Then you can replace the element with type="password", with new html where type="text" and if the checkbox is unchecked the value will be dropped into password type field.

There is a problem with this method in that the password type value will be visible in the code, however to get round this you can always remove the value attribute from the password type and just force the user to re-type. If you can live with that in you application.

jamiescript
  • 1,284
  • 1
  • 11
  • 18
0
function change(){
id.type="password";
}


<input type="text" value="123456" id="change">
<button onclick="pass()">Change to pass</button>
<button onclick="text()">Change to text</button>
<script>function pass(){document.getElementById('change').type="password";} function text(){document.getElementById('change').type="text"; } </script>
Vitalicus
  • 1,188
  • 13
  • 15
0

There is no any possibility to show autofilled password for security reasons. Anyone could see your password on your computer for this page if this is possible.

You have to deal with following for complete solution:

  • javascript is not allowed - then you should not display choose password checkbox
  • autocomplete is turned on - as I wrote, you're not able to show password filled this way. Eaighter switch off autocomplete or hide show password until user re-type password.

Autocomplete switch off by this jQuery

$('input').attr('autocomplete', 'off');

For adding checkbox on the fly you can use following jquery-showPassword plugin available at http://www.cuptech.eu/jquery-plugins/

Boris Šuška
  • 1,796
  • 20
  • 32
-1
Password: <input type="password" value="" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password

<script>
function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
}
</script>
Manikandan J
  • 1