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()只会获取文本内容
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 ...
随机推荐
- MyOD(课下作业,选做)
MyOD(课下作业,选做) 代码要求 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.b ...
- shutil&shelve
https://www.cnblogs.com/xiangsikai/p/7787101.html http://www.cnblogs.com/wupeiqi/articles/4963027.ht ...
- js简单实现自动轮播
//简单一个布局存放图片 <div class="lb"> <div class="lbt"> <img src="im ...
- java 动态代理模式(jdk和cglib)
package proxy.dynamicproxy; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Met ...
- 嵌入 Office ,doc|docx|xls|xlsx|ppt|pptx|pdf|等
<iframe src="https://view.officeapps.live.com/op/embed.aspx?src=http%3A%2F%2Fcdn%2Dresource% ...
- MYSQL双主全库同步复制
环境: A.B两台服务器分别安装mysql-5.7.18服务端,配置成互为主从同步. linux系统版本为CentOS7 A服务器ip:192.168.1.7 主机名:test1 B服务器ip:1 ...
- JMeter通过beanShell脚本生成随机手机号
package xnzx; /** * @author xn088587 * */ public class getTel{ public static int getNum(int start,in ...
- 大数据学习之HDFS基本API操作(下)06
hdfs文件流操作方法一: package it.dawn.HDFSPra; import java.io.BufferedReader; import java.io.FileInputStream ...
- mongDB数据库 小白学习
一 安装配置 1.配置文件mongod.cfg (路径:D:\data\config\mongod.cfg) 如下: systemLog: destination: file path: D:\da ...
- C# 串口操作系列(5)--通讯库雏形
C# 串口操作系列(5)--通讯库雏形 标签: 通讯c#数据分析byteclassstring 2010-08-09 00:07 21378人阅读 评论(73) 收藏 举报 分类: 通讯类库设计(4 ...