小眼睛登录

不念不忘少年蓝@ 2022-06-02 10:12 309阅读 0赞

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

![密码隐藏][SouthEast]![密码隐藏][SouthEast 1]

#### 样式代码如下: ####

##### 注: #####

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
       2
       3
       4
       5
       6
       7
       8
       9
       10

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;
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10

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');
           };
       });     
    }
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14

#### 代码逻辑思路(最简单的实现方式): ####

通过绑定显示和隐藏图片的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().
     
      
       1
       2
       3
       4

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

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

##### **好的事情每天用心做一点，然后等待时间的回报O(∩\_∩)O~~** #####

**转自：http://blog.csdn.net/qq\_33072593/article/details/53749320**

[SouthEast]: https://img-blog.csdn.net/20161219213148318?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzMwNzI1OTM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220602/7be11fdeba924f0fb7ec649f702baa03.png