首页 > 文章资讯 > 站长教程 > 建站知识 > jQuery 点击显示按钮显示密码框内的密码

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

时间：2023年10月23日

来源：网络

编辑：佚名

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

新闻资讯更多

猜你需要