using 2 inputs or change type of input to show password

Question

I want to add a show password checkbox to my form. When a user checks that checkbox password is shown. Most of the examples that I found are using 2 inputs, one with type="text" and the other with type="password" . And switch between these inputs according to the status of the checkbox. it is simpler to change type of input to type="text" , so why people use 2 inputs?

Answer 1

Be careful with using type="text" as a way of showing the password, as it exposes the user to saving the password in plain text in their autocomplete settings. I think the two input box approach is probably safer as you can stop the text one from being picked up by autocomplete by using autocomplete="off"

See this artcile describing the vulnerability: https://www.foxtonforensics.com/blog/post/uncovering-plain-text-passwords-in-internet-history

Answer 2

I hope ur trying to ask that u want single password input field and show password button...Below is my answer

  <input type="password" name="passwd" id="txtPassword" placeholder="Password"  required="required">
 <input type="checkbox" id="showhide"/>
  <label for="showhide" id="showhidelabel">Show Password</label>




     <script type="text/javascript">
     $(document).ready(function () {
     $("#showhide").click(function () {
     if ($("#txtPassword").attr("type")=="password") {
     $("#txtPassword").attr("type", "text");
     }
     else{
      $("#txtPassword").attr("type", "password");
     }
   });
  });

Answer 3

probably to make it work on old versions of IE, since IE 9 and below, do not allow dynamic change of type="password" to type="text" . it throws an error "Could not get the type property"