jQuery 点击显示按钮显示密码框内的密码

jQuery 点击显示按钮显示密码框内的密码

jQuery代码为：

$(document).ready(function() {
  $('#pwd_show').click(function() {
    var passwordInput = $('#password');
    if (passwordInput.attr('type') === 'password') {
      passwordInput.attr('type', 'text');
      $('#pwd_show').html('隐藏');
    } else {
      passwordInput.attr('type', 'password');
      $('#pwd_show').html('显示');
    }
  });
});

html代码为：

<div class="form-group">
<input type="password" name="password" required id="password" placeholder="密码">
<button id="pwd_show" style="width: 20%; position: absolute; top: 0px; right: 0px; height: 40px;"> 显示 </button>
</div>

在页面加载完成后，我们绑定了一个点击事件到按钮上。当用户点击按钮时，我们首先获取密码输入框的引用，并检查它当前的类型是不是密码类型。如果是，我们将类型改为文本类型，这样密码就能够被看到。同时，我们将按钮的文字改为“隐藏”。如果密码输入框不是密码类型，我们将类型改回密码类型，并将按钮的文字改为“显示”。这样，每次用户点击按钮时，我们就可以切换密码的可见性。