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

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

密码隐藏密码隐藏

样式代码如下:

注:

html:

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

/*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方法。
  • <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()只会获取文本内容

     更多学习资料->

posted @ 2018-08-10 17:55  奔跑的太阳花  阅读(76722)  评论(2编辑  收藏  举报