“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 te

Answer 1

$('.show-password').change(function() {
  if ($("#form-fields_show-password").attr('checked')) {
    var showValue = $('#form-fields_password').val();
    var showPassword = $('');
    $('#form-fields_password').replaceWith(showPassword);
  } else {
    var hideValue = $('#form-fields_password').val();
    var hidePassword = $('');
    $('#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.