Revealing input type="password"

Question

I'm trying to make a button to reveal the password written on the input. My poor JS skills tell me that I can achieve it by doing something like this:

I tried this:

$('#passReveal').on('click', function(){
    $( "#input-show" ).attr('type', 'text');
    if ($( "#input-show" ).attr('type', 'text')){
        $( "#input-show" ).attr('type', 'password');
    }
});

But doesn't work.

I think this one is the closest, but I have a bug: you must click twice the button to make it work the first time, why is that?

$('#passReveal').on('click', function(){
    $( "#input-show" ).attr('type', 'text');
    $( "#input-show" ).toggleClass('passRevealed');
    if ($( "#input-show" ).hasClass('passRevealed')){  
        $( "#input-show" ).attr('type', 'password');        
    }
});

https://jsfiddle.net/tepLkc7u/2/

I hope you understand my bad english, im learning :)

Your logic is the other way around. You're using `.attr('type', 'passowrd')` when it should be `.attr('type', 'text')` — 3abqari, Jun 21 '15 at 14:53

T.J. Crowder · Answer 1 · 2015-06-21T15:22:33.377

6

You can't reliably change the type of an input, cross-browser.

What you can do instead is put two inputs next to each other and choose which one to show:

$('#passReveal').on('click', function() {
  var show = $("#input-show"),
      pass = $("#input-pass"),
      showing = show.is(":visible"),
      from = showing ? show : pass,
      to = showing ? pass : show;
  from.hide();
  to.val(from.val()).show();
  $(this).text(showing ? "Reveal" : "Hide");
});

<input type="password" id="input-pass" placeholder="Password">
<input type="text" id="input-show" placeholder="Password" style="display: none">
<button id="passReveal">Reveal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

edited Jun 21 '15 at 15:22

answered Jun 21 '15 at 14:50

T.J. Crowder

1,031,962
187
1,923
1,875

Brilliant! Having `$(this).text('Reveal')` in the *then* block and `$(this).text('Hide')` in the *else* block would make this *perfect*. – PeterKA Jun 21 '15 at 15:18
@PeterKA: Ah, good point. :-) I also don't like the repeated code, but each time I tried to improve it, it got *worse* rather than better. I think I improved it in the end, though. – T.J. Crowder Jun 21 '15 at 15:20

score 0 · Answer 2 · edited May 23 '17 at 11:58

What you were doing is toggling the class and then setting the input type to password if it had the class.

So, since it had the class the first time(it was toggled in), it would make the input type back to a password.

The second time, it would not because the input no longer had the class.

Nevertheless, to make it work the first time try

$('#passReveal').on('click', function() {
  $("#input-show").attr('type', 'text');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<input type="password" id="input-show" placeholder="Password">
<button id="passReveal">Reveal</button>

Update

If you wish to achieve IE-Compatibility beware of changing the type attribute dynamically. Rather, follow the approach of using two seperate inputs like in @T.J. Crowders answer.

See Changing <input> type using jQuery with cross browser support and notes about cross-browser consistency in attr()

You can't reliably change the `type`, cross-browser, of an existing `input`. — T.J. Crowder, Jun 21 '15 at 14:51
@T.J.Crowder, dont say *cross-browser*. This is about IE compatibility(rolling eyes). Thanks for the good answer in http://stackoverflow.com/questions/5881874/changing-input-type-using-jquery-with-cross-browser-support — AmmarCSE, Jun 21 '15 at 14:54

Revealing input type="password"

2 Answers2