700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html 密码输入框显示隐藏 实现input密码框显示/隐藏的功能

html 密码输入框显示隐藏 实现input密码框显示/隐藏的功能

时间:2022-03-06 13:14:35

相关推荐

html 密码输入框显示隐藏 实现input密码框显示/隐藏的功能

现在很多地方的注册都只有一个密码框,然后再加个显示/隐藏按钮,这样做很简洁,不用再很繁琐的输入两遍密码,用户能自己看到密码输入得对不对。所以幻幻也研究了一发实现方案:

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");

});

效果图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。