现在很多地方的注册都只有一个密码框,然后再加个显示/隐藏按钮,这样做很简洁,不用再很繁琐的输入两遍密码,用户能自己看到密码输入得对不对。所以幻幻也研究了一发实现方案:
1. 首先来个密码框
2.CSS
让显示/隐藏按钮放在密码框的最右侧.password{
position:relative;
}
.password.n-txtCss{
width:90%!important;
}
.password.fa{
position:absolute;
right:10px;
top:15px;
font-size:20px;
cursor:pointer;
}
3.JS实现$(".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");
});
效果图
如果觉得《html 密码输入框显示隐藏 实现input密码框显示/隐藏的功能》对你有帮助,请点赞、收藏,并留下你的观点哦!