码迷,mamicode.com
首页 > Web开发 > 详细

js密码修改显示与隐藏效果

时间:2019-03-05 12:44:47      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:change   webp   ack   order   highlight   visible   ==   inpu   cli   

一、添加input框

<form class="login_form">
        <input class="password inputpwd" id="oldpwd" name="oldpwd" type="password" placeholder="请输入旧密码" />
        <div class="invisible" onclick="changepicture(this,‘oldpwd‘)">
            <img src="~/Content/images/login/不可见.png" />
        </div>
        <input class="password inputpwd" id="newpwd" name="newpwd" type="password" placeholder="请输入新密码" />
        <div class="invisible" onclick="changepicture(this,‘newpwd‘)">
            <img src="~/Content/images/login/不可见.png" />
        </div>
        <input class="password inputpwd" id="quepwd" name="quepwd" type="password" placeholder="请确认密码" />
        <div class="invisible" onclick="changepicture(this,‘quepwd‘)">
            <img src="~/Content/images/login/不可见.png" />
        </div>
</form>

二、添加css样式

    .inputpwd {
        outline: medium;
        border: none !important;
        border-bottom: 1px solid rgba(235,235,235,1)!important;
        width:100%!important;
    }
    /*1).隐藏按钮css ,图片用webpack做了压缩,做了加密*/
    .invisible {
        margin-top: -50px;
        margin-left: 80%
    }


/*给input添加一个背景图片,no-repeat不平铺,设置padding-left的值为背景图片的宽度*/
.login_form input {
width: 80%;
padding-left: 80px;
border: #E7E7E7 1px solid;
font-size: 26px;
color: #72828f;
height: 75px;
border-radius: 10px;
margin: 0 3%;
}

.login_form .username {
background: #FFFFFF url(../../Content/weixinImage/登录/用户.png) 25px 20px no-repeat;
background-size: 30px 30px;
margin-top: 60px;
}

.login_form .password {
background: #FFFFFF url(../../Content/weixinImage/登录/密码.png) 28px 22px no-repeat;
background-size: 26px 33px;
margin-top: 30px;
}

三、js控制文本框的type

///密码显示与隐藏
    function changepicture(obj, name) {

        var showPwd = $(‘#‘ + name + ‘‘);
        if (showPwd.prop(‘type‘) ==‘password‘) {
           showPwd.prop(‘type‘, ‘text‘);
           $(obj).find(‘img‘).attr("src", "@Url.Content("~/Content/images/login/可见.png")");
        }
        else {
            showPwd.prop(‘type‘, ‘password‘);
            $(obj).find(‘img‘).attr("src", "@Url.Content("~/Content/images/login/不可见.png")");
        }
       

    }

 效果图如下:

 

技术图片

 

js密码修改显示与隐藏效果

标签:change   webp   ack   order   highlight   visible   ==   inpu   cli   

原文地址:https://www.cnblogs.com/divspan/p/10475954.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!