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

样式代码如下:

注:

html:

  1. <ul>
  2. <li class="phone bgImg">
  3. <input type="text" id="phone" maxlength="11" placeholder="手机号"/>
  4. </li>
  5. <li class="password bgImg">
  6. <input type="password" id="password" maxlength="10" placeholder="6-10位数字&字母组合登录密码"/>
  7. <a href="#" id="passwordeye" class="invisible bgImg"></a>
  8. </li>
  9. </ul>

css:

  1. /*1).隐藏按钮css ,图片用webpack做了压缩,做了加密*/
  2. ul li .invisible {
  3. background-image: url(data:image/png;base64,iVBORw0K);
  4. height: .5rem;
  5. top: .7rem;
  6. /*2).显示按钮css*/
  7. ul li .visible {
  8. background-image: url(data:image/png;base64,iVBORw0KG);
  9. height: .8rem;
  10. top: .55rem;

js:

  1. //显示隐藏对应的switchPwd()方法:
  2. function switchPwd() {
  3. var passwordeye = $('#passwordeye');
  4. var showPwd = $("#password");
  5. passwordeye.off('click').on('click',function(){
  6. if(passwordeye.hasClass('invisible')){
  7. passwordeye.removeClass('invisible').addClass('visible');//密码可见
  8. showPwd.prop('type','text');
  9. }else{
  10. passwordeye.removeClass('visible').addClass('invisible');//密码不可见
  11. showPwd.prop('type','password');
  12. };
  13. });
  14. }

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

通过绑定显示和隐藏图片的id值(invisible和visible),通过去除属性和添加属性,切换图片的显示,然后对type的值(type=”text”,type=”password”)进行绑定显示.这里面给的是prop()方法来获取属性值,其实获取属性值得另一个attr()方法,这里插一曲:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
    1. <a href="http://www.baidu.com" target="_self">百度</a>
    2. href,target是a链接中固有的属性值 用prop()方法获取属性值.
    3. <a href="#" id="desc" action="drop">减少</a>
    4. href,id是a链接中固有的属性值 ,但是action是自己添加的属性值,所有如过我想获取action的属性值,用attr().

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

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

input type=passoord 密码框的明密文(显示和隐藏) 显示的更多相关文章

  1. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  2. jquery更改输入框type为密码框password

    很蛋疼的一个问题: <input type="text" id="e1" value="123" /> 用juqery将文本框变 ...

  3. HTML:<input type="text">文本框不可编辑的方式

    1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本 ...

  4. IE9+浏览器input文本框/密码框后面的小叉子/小眼睛清除

    为了方便我们的触控操作,IE高等浏览器针对input及input type="password"分别提供了快速清除钮(X图标)以及密码文字显示钮(小眼睛图标)的功能. 由于这经常跟 ...

  5. input type=password 浏览器会自动填充密码的问题

    解决办法是在form上或input上添加autoComplete="off"这个属性. form表单的属性如下所示: 但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决. ...

  6. IE中input标签密码框与文本框宽度不一样问题

    前言 在项目登录界面中有账户和密码的输入框,在Chrome中显示是正常的(本人使用的是Chrome浏览器,平时不用IE).等部署到客户的服务器上,访问时发现一个问题,在IE浏览器中文本框与密码框的宽度 ...

  7. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  8. ie9以上浏览器input文本框/密码框后面的小叉子/小眼睛问题

    找了很久不知什么属性控制的这个东西,经过群友的指点重要找到.

  9. <input type="text">文本输人框

    type类型: text  文本框 password  口令密码输人框 reset  重置或清除 buttou  命令按钮 checkbox  复选框 radio  单选框 submit  提交 fi ...

随机推荐

  1. python的学习之路(二)

    1.字符串内置功能练习#!/usr/bin/env python# *_*coding:utf-8 *_*# Author: harsonname = 'harson'name =str('harso ...

  2. nginx实现Ipv6地址解析

    nginx实现Ipv6地址解析 1.nginx实现Ipv6地址解析 [root@ip-10-109-1-47 conf]# cat nginx.conf worker_processes 2; eve ...

  3. org.json.JSONObject的getString和optString使用注意事项

    结论:org.json.JSONObject的getString如果取不到对应的key会抛出异常,optString则不会 /** * Returns the value mapped by {@co ...

  4. RabbitMQ教程

    1.引言 RabbitMQ——Rabbit Message Queue的简写,但不能仅仅理解其为消息队列,消息代理更合适.RabbitMQ 是一个由 Erlang 语言开发的AMQP(高级消息队列协议 ...

  5. pyzmq学习笔记

    前言 使用过简单的python的ZMQ:server开启3个线程,client发送心跳包,如果服务端超过n秒没应答,则重新连接. 网上找的案例,server使用的zmq.device,但是一直不明白什 ...

  6. IIS+Tomcat功能iis端口2

    之前写过IIS桥接Tomcat是通过isapi_redirect.dll,组件方式实现共用端口的,但是在Windows2012服务器 iis8.0版本中,配置完成后没有效果,比较抓狂,分析发现如下信息 ...

  7. AutoCAD 2019 for Mac 特别版(附注册机)

    还在寻找CAD2019 for mac吗?AutoCAD 2019 mac版终于更新啦,MAC OS X平台上最专业的cad三维设计绘图软件.AutoCAD 2019版支持目前最新的MacOS Moj ...

  8. Codeforces 279D The Minimum Number of Variables 状压dp

    The Minimum Number of Variables 我们定义dp[ i ][ mask ]表示是否存在 处理完前 i 个a, b中存者 a存在的状态是mask 的情况. 然后用sosdp处 ...

  9. python 项目实例

    参考:  https://blog.csdn.net/yz764127031/article/details/71522161 https://www.cnblogs.com/linuxprobe/p ...

  10. Python语言的PyCharm开发工具的简单使用

    1.创建一个新的项目 创建一个目录或者文件夹 设置模板:制作一个常用的,模板 # @Author:lnx# @version V1.0# -*- coding:UTF-8 -*- 搜索/替换快捷键 代 ...