一、添加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密码修改显示与隐藏效果
原文地址:https://www.cnblogs.com/divspan/p/10475954.html