现在很多地方的注册都只有一个密码框,然后再加个显示/隐藏按钮,这样做很简洁,不用再很繁琐的输入两遍密码,用户能自己看到密码输入得对不对。所以幻幻也研究了一发实现方案:
1. 首先来个密码框
<dd class="password"> <input name="" type="password" class="n-txtCss" placeholder="请输入您的密码" datatype="*6-16" errormsg="密码范围在6~16位之间!" nullmsg="请输入密码!" sucmsg=" " maxlength="16" plugin="passwordStrength"> <i class="fa fa-eye-slash"></i> </dd>
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"); });