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>

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-Compatibility ，请注意动态更改type属性。相反，请遵循使用@ T.J中的两个单独输入的方法。克劳斯回答。

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

显示输入类型=＆＃34;密码＆＃34;

2 个答案: