input type=passoord 密码框的明密文(显示和隐藏) 显示

最近在写一个新的项目,从头开始写,所以就要从注册登录开始做起.以前写登录注册模块的时候,无外乎给input框一个type=”password”就可以了,近期因为要涉及到显示隐藏状态的切换.

样式代码如下:

注:

html:

css:

/*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;

js:

//显示隐藏对应的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方法。

百度

href,target是a链接中固有的属性值 用prop()方法获取属性值.

减少

href,id是a链接中固有的属性值 ,但是action是自己添加的属性值,所有如过我想获取action的属性值,用attr().

以上就是 实现密码的明密文切换显示的逻辑实现 注:这里补一个上一个博文的知识点 jquery中html(),text(),val()之前的区别:

.html()用来读取和修改元素的html标签

.text()用来读取或修改元素的纯文本内容

.val()用来赌气或修改表单元素的value值

注:这三个都可以使用回调函数的返回值来动态改变多个元素值, .html()会将标签也取出,.text()只会获取文本内容

更多学习资料->