html输入密码自动隐藏,js实现input密码框显示/隐藏功能

JavaScript实现input密码框显示/隐藏的功能，供大家参考，具体内容如下

实现代码：

.password{

position: relative;

width: 280px;

height: 60px;

}

.password,.n-txtCss{

display: flex;

align-items: center;

}

.password .fa{

position: absolute;

right: 10px;

top:15px;

font-size: 20px;

cursor: pointer;

}

.fa-eye-slash{

margin-top: 6px;

margin-left: 7px;

width: 24px;

height: 20px;

background-image: url(./vivo_img/login/eye-password.png);

background-repeat: no-repeat;

background-size: 24px 17px;

}

.fa-eye{

margin-top: 6px;

width: 24px;

margin-left: 7px;

height: 20px;

background-image: url(./vivo_img/login/eye-password-active.png);

background-repeat: no-repeat;

background-size: 24px 17px;

}

$(".password").on("click", ".fa-eye-slash", function () {

$(this).removeClass("fa-eye-slash").addClass("fa-eye");

$(this).prev().attr("type", "text");

});

$(".password").on("click", ".fa-eye", function () {

$(this).removeClass("fa-eye").addClass("fa-eye-slash");

$(this).prev().attr("type", "password");

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。