摘要：
目前，在许多地方，只有一个密码框用于注册，然后添加了显示/隐藏按钮。这非常简单，用户无需输入两次密码即可查看密码输入是否正确。因此Fantasy还研究了第一个引擎的实现方案：1.首先，密码框1234＜ddclass＝“password”＞＜inputname＝“”type＝“passpord”class=“n-txtCss”placeholder＝“Please enter your password”datatype=“*6-16”errormsg=“密码范围在6到16位之间！
现在很多地方的注册都只有一个密码框，然后再加个显示/隐藏按钮，这样做很简洁，不用再很繁琐的输入两遍密码，用户能自己看到密码输入得对不对。所以幻幻也研究了一发实现方案：
1. 首先来个密码框
1 2 3 4 | <ddclass="password"><inputname=""type="password"class="n-txtCss"placeholder="请输入您的密码"datatype="*6-16"errormsg="密码范围在6~16位之间！"nullmsg="请输入密码！"sucmsg=" "maxlength="16"plugin="passwordStrength"><iclass="fafa-eye-slash"></i></dd> |
2.CSS
让显示/隐藏按钮放在密码框的最右侧
1 2 3 4 5 6 7 8 9 10 11 12 13 | .password{position:relative;}.password.n-txtCss{width:90%!important;}.password.fa{position:absolute;right:10px;top:15px;font-size:20px;cursor:pointer;} |
3.JS实现
1 2 3 4 5 6 7 8 9 | $(".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");}); |
效果图
