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

最近在写一个新的项目,从头开始写,因此就要从注册登陆开始作起.之前写登陆注册模块的时候,无外乎给input框一个type=”password”就能够了,近期由于要涉及到显示隐藏状态的切换.

样式代码以下:

注:

html:css

<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>

css:html

/*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:jquery

//显示隐藏对应的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()方法,这里插一曲:webpack

对于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()以前的区别:

web

.html()用来读取和修改元素的html标签 .text()用来读取或修改元素的纯文本内容 .val()用来赌气或修改表单元素的value值 注:这三个均可以使用回调函数的返回值来动态改变多个元素值, .html()会将标签也取出,.text()只会获取文本内容