How to create HTML for a "show password" functionality?

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, Jan 13 '13 at 16:53
jQuery doesn't allow that. Check this : http://stackoverflow.com/questions/1544317/jquery-change-type-of-input-field — TJ-, Jan 13 '13 at 16:53
Check this video: http://www.youtube.com/watch?v=5YeSqtB0kfE — Grijesh Chauhan, Jul 08 '14 at 13:37
2017 - Changing the input type now works. I adapted a little bit the solution in Grijesh video: https://jsfiddle.net/herLkape/. Tested with IE11, GC 59 and FF54. — Jonathan Parent Lévesque, Jul 06 '17 at 15:44

Anujith · Accepted Answer · 2014-07-11T04:36:37.480

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 '14 at 04:36

answered Jan 13 '13 at 17:16

Anujith

9,201
6
31
47

2

Actually, your second example does just that: i.e. to change the type attribute. – Valeriu Paloş Jan 30 '17 at 13:27
1

Please take a better look, the script is creating a new element and deleting the previous one. Nice answer! – Gustavo Soler Aug 07 '17 at 19:11

How to create HTML for a "show password" functionality?

1 Answers1