显示输入类型="密码"

Question

我正在尝试按一下按钮来显示输入上写的密码.我糟糕的JS技能告诉我,我可以通过做这样的事情来实现它:

我试过这个:

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

但是不起作用.

我认为这是最接近的,但我有一个错误:你必须点击两次按钮才能让它第一次工作,为什么会这样？

$('#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/

我希望你明白我的英语不好,我正在学习:)

Answer 1

你不能可靠地改变type了的input,跨浏览器.

你可以做的是把两个输入放在一起,然后选择要显示的输入:

$('#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>