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

1. 首先来个密码框

<dd class="password">
    <input name="" type="password" class="n-txtCss" placeholder="请输入您的密码" datatype="*6-16" errormsg="密码范围在6~16位之间!" nullmsg="请输入密码!" sucmsg="&nbsp;" 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");
});


效果图

QQ截图20170819103359.png


赞助本站,网站的持续发展离不开你们的支持!一分也是爱ヾ(◍°∇°◍)ノ゙
 本文链接: ,花了好多脑细胞写的,转载请注明链接喔~~
登陆
      正在加载评论