####最近在写一个新的项目,从头开始写,所以就要从注册登录开始做起.以前写登录注册模块的时候,无外乎给input框一个type="password"就可以了,近期因为要涉及到显示隐藏状态的切换.
####样式代码如下:
#####注:
1.样式展示():
<ul>
<li class="phone bgImg">
<input type="text" id="phone" maxlength="11" placeholder="手机号"/>
</li>
<li class="password bgImg">
<input type="password" id="password" maxlength="10" placeholder="6-10位数字&字母组合登录密码"/>
<a href="#" id="passwordeye" class="invisible bgImg"></a>
</li>
</ul>
1).隐藏按钮css ,图片用webpack做了压缩,做了加密
ul li .invisible {
background-image: url(data:image/png;base64,iVBORw0K);
height: .5rem;
top: .7rem;
2).显示按钮css
ul li .visible {
background-image: url(data:image/png;base64,iVBORw0KG);
height: .8rem;
top: .55rem;
2.显示隐藏对应的switchPwd()方法:
function switchPwd() {
var passwordeye = $('#passwordeye');
var showPwd = $("#password");
passwordeye.off('click').on('click',function(){
if(passwordeye.hasClass('invisible')){
passwordeye.removeClass('invisible').addClass('visible');//密码可见
showPwd.prop('type','text');
}else{
passwordeye.removeClass('visible').addClass('invisible');//密码不可见
showPwd.prop('type','password');
};
});
}
####代码逻辑思路(最简单的实现方式):
通过绑定显示和隐藏图片的id值(invisible和visible),通过去除属性和添加属性,切换图片的显示,然后对type的值(type=“text”,type=“password”)进行绑定显示.这里面给的是prop()方法来获取属性值,其实获取属性值得另一个attr()方法,这里插一曲:
- 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
<a href="http://www.baidu.com" target="_self">百度</a>
href,target是a链接中固有的属性值 用prop()方法获取属性值.
<a href="#" id="desc" action="drop">减少</a>
href,id是a链接中固有的属性值 ,但是action是自己添加的属性值,所有如过我想获取action的属性值,用attr().
以上就是 实现密码的明密文切换显示的逻辑实现
注:这里补一个上一个博文的知识点
jquery中html(),text(),val()之前的区别:
.html()用来读取和修改元素的html标签
.text()用来读取或修改元素的纯文本内容
.val()用来赌气或修改表单元素的value值
注:这三个都可以使用回调函数的返回值来动态改变多个元素值, .html()会将标签也取出,.text()只会获取文本内容
#####好的事情每天用心做一点,然后等待时间的回报O(∩_∩)O~~
有朋友经常咨询眉毛素材,我放到网盘了。需要的朋友自行下载吧。
链接: https://pan.baidu.com/s/1dAXOys91Jufl0566K0fGvw
提取码: 8sjc