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()之前的区别:- <a href="http://www.baidu.com" target="_self">百度</a>
- .html()用来读取和修改元素的html标签
- .text()用来读取或修改元素的纯文本内容
- .val()用来赌气或修改表单元素的value值
- 注:这三个都可以使用回调函数的返回值来动态改变多个元素值, .html()会将标签也取出,.text()只会获取文本内容
- .html()用来读取和修改元素的html标签
input type=passoord 密码框的明密文(显示和隐藏) 显示的更多相关文章
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- jquery更改输入框type为密码框password
很蛋疼的一个问题: <input type="text" id="e1" value="123" /> 用juqery将文本框变 ...
- HTML:<input type="text">文本框不可编辑的方式
1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本 ...
- IE9+浏览器input文本框/密码框后面的小叉子/小眼睛清除
为了方便我们的触控操作,IE高等浏览器针对input及input type="password"分别提供了快速清除钮(X图标)以及密码文字显示钮(小眼睛图标)的功能. 由于这经常跟 ...
- input type=password 浏览器会自动填充密码的问题
解决办法是在form上或input上添加autoComplete="off"这个属性. form表单的属性如下所示: 但是这个解决方案在谷歌和火狐上均有bug,下面来一个一个解决. ...
- IE中input标签密码框与文本框宽度不一样问题
前言 在项目登录界面中有账户和密码的输入框,在Chrome中显示是正常的(本人使用的是Chrome浏览器,平时不用IE).等部署到客户的服务器上,访问时发现一个问题,在IE浏览器中文本框与密码框的宽度 ...
- 关于复选框input[type=checkbox]
关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...
- ie9以上浏览器input文本框/密码框后面的小叉子/小眼睛问题
找了很久不知什么属性控制的这个东西,经过群友的指点重要找到.
- <input type="text">文本输人框
type类型: text 文本框 password 口令密码输人框 reset 重置或清除 buttou 命令按钮 checkbox 复选框 radio 单选框 submit 提交 fi ...
随机推荐
- python的学习之路(二)
1.字符串内置功能练习#!/usr/bin/env python# *_*coding:utf-8 *_*# Author: harsonname = 'harson'name =str('harso ...
- nginx实现Ipv6地址解析
nginx实现Ipv6地址解析 1.nginx实现Ipv6地址解析 [root@ip-10-109-1-47 conf]# cat nginx.conf worker_processes 2; eve ...
- org.json.JSONObject的getString和optString使用注意事项
结论:org.json.JSONObject的getString如果取不到对应的key会抛出异常,optString则不会 /** * Returns the value mapped by {@co ...
- RabbitMQ教程
1.引言 RabbitMQ——Rabbit Message Queue的简写,但不能仅仅理解其为消息队列,消息代理更合适.RabbitMQ 是一个由 Erlang 语言开发的AMQP(高级消息队列协议 ...
- pyzmq学习笔记
前言 使用过简单的python的ZMQ:server开启3个线程,client发送心跳包,如果服务端超过n秒没应答,则重新连接. 网上找的案例,server使用的zmq.device,但是一直不明白什 ...
- IIS+Tomcat功能iis端口2
之前写过IIS桥接Tomcat是通过isapi_redirect.dll,组件方式实现共用端口的,但是在Windows2012服务器 iis8.0版本中,配置完成后没有效果,比较抓狂,分析发现如下信息 ...
- AutoCAD 2019 for Mac 特别版(附注册机)
还在寻找CAD2019 for mac吗?AutoCAD 2019 mac版终于更新啦,MAC OS X平台上最专业的cad三维设计绘图软件.AutoCAD 2019版支持目前最新的MacOS Moj ...
- Codeforces 279D The Minimum Number of Variables 状压dp
The Minimum Number of Variables 我们定义dp[ i ][ mask ]表示是否存在 处理完前 i 个a, b中存者 a存在的状态是mask 的情况. 然后用sosdp处 ...
- python 项目实例
参考: https://blog.csdn.net/yz764127031/article/details/71522161 https://www.cnblogs.com/linuxprobe/p ...
- Python语言的PyCharm开发工具的简单使用
1.创建一个新的项目 创建一个目录或者文件夹 设置模板:制作一个常用的,模板 # @Author:lnx# @version V1.0# -*- coding:UTF-8 -*- 搜索/替换快捷键 代 ...