显示输入类型=“密码”

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

您无法跨浏览器可靠地更改 input 的 type。

您可以做的是将两个输入并排放置，然后选择显示哪一个：

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

Answer 2

您所做的是切换类，然后将输入类型设置为密码（如果有类）。

所以，因为它第一次有这个类（它被切换进来），它会使输入类型恢复为密码。

第二次，它不会因为输入不再有类。

尽管如此，第一次尝试使其工作

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

更新

如果您希望实现 IE 兼容性，请注意动态更改 type 属性。相反，请遵循使用两个单独输入的方法，如 @T.J.人群回答。

请参阅Changing <input> type using jQuery with cross browser support 和attr() 中有关跨浏览器一致性的注释