How to create HTML for a "show password" functionality? [duplicate]

Question

Possible Duplicate:
JQuery change type of input field

Demo here:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<input type="password" name="password" />
<button>Show Password</button>

$(document).ready(function() {
  $('button').click(function() {
    $('input').attr('type', 'text');
  });
});

I'm trying to create a button (or checkbox) that users will be able to toggle to see their password written in plain text.

This is basically for portable devices where typing in passwords is a pain, and seeing it in plain text while writing is a UX improvement.

In my example above, changing the type of the input doesn't work.

Any suggestions on how to tackle this problem?

Try using two input elements with their contents in sync, and alternately hide one and show the other. — millimoose
– millimoose, Commented Jan 13, 2013 at 16:53
jQuery doesn't allow that. Check this : stackoverflow.com/questions/1544317/… — TJ-
– TJ-, Commented Jan 13, 2013 at 16:53
2017 - Changing the input type now works. I adapted a little bit the solution in Grijesh video: jsfiddle.net/herLkape. Tested with IE11, GC 59 and FF54. — Jonathan Parent Lévesque
– Jonathan Parent Lévesque, Commented Jul 6, 2017 at 15:44

Anujith · Accepted Answer · 2014-07-11 04:36:37Z

16

You can't change type attribute.. See workaround here : http://jsfiddle.net/Ngtp7/2/

and a variation here : http://jsfiddle.net/Ngtp7/

edited Jul 11, 2014 at 4:36

answered Jan 13, 2013 at 17:16

Anujith

9,3686 gold badges36 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Valeriu Paloş Over a year ago

Actually, your second example does just that: i.e. to change the type attribute.

Gustavo Soler Over a year ago

Please take a better look, the script is creating a new element and deleting the previous one. Nice answer!

Collectives™ on Stack Overflow

How to create HTML for a "show password" functionality? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related