js实现密码的显示和隐藏

最新推荐文章于 2024-04-08 21:28:38 发布
最新推荐文章于 2024-04-08 21:28:38 发布
阅读量135 收藏 1
点赞数 1
文章标签： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52256892/article/details/120650305
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				border-bottom: 1px solid #FF0000;
				margin: 100px auto;
				position: relative;
			}
			.box input{
				width: 370px;
				height: 30px;
				border:0 ;
				outline: none;
			}
			label img{
				width: 24px;
				height: 24px;
			position: absolute;
		left: 380px;
			}
		</style>
	</head>
	<body>
			<div class="box">
			<label for=""><img src="img/yanjing.png" id="eye"></label>
				<input type="password" id="psw" />
			</div>
			<script type="text/javascript">
				var eye = document.getElementById('eye');//获取元素eye
				var psw = document.getElementById('psw');//获取元素psw
				var flag = 0;
				eye.onclick =function(){
					if(flag == 0 ){
						psw.type = 'text';
						eye.src ='img/yanjing.png';
						flag =1;
					}else{
						psw.type = 'password';
						eye.src ='img/biyan.png';
						flag = 0 ;
					}
				}
			</script>
	</body>
</html>
秃头码农007
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用js实现密码的显示和隐藏
新手上路的博客
11-18 6028
第一、首先准备两张眼睛的照片，例如下图（也可以去找自己喜欢的） 第二、Html样式： <div class="see"> <img src="~/Condent/img/openeye.png" id="openEye" style="display:none;" /> <img src="~/Condent/img/closeeye.png" alt="隐藏密码" id="closeEye" /> </div> 第三、js代码 //----
vue实现密码显示与隐藏的最简方法
qq_43557758的博客
04-07 6445
vue实现密码显示与隐藏的最简方法 实现效果：（画质略糊见谅） 要求：闭眼icon覆盖睁眼icon看起来和其本身一样 我用的 icon链接：http://www.fontawesome.com.cn/faicons/ gif的完整代码：（有点长，但涉及密码显示隐藏的内容很短） <template> <div class="login"> <div class="loginTitle"> 管理员登录 <
案例：js实现密码的显示与隐藏
m0_65085680的博客
10-05 1641
【代码】案例：js实现密码的显示与隐藏。
js案例（密码的显示与隐藏）
最新发布
2303_76379956的博客
04-08 347
利用onclick（事件绑定）当点击按钮时，密码框的type属性变成password属性。s。
js实现密码输入框点击小眼睛显示或隐藏密码
努力变好
10-17 5437
登录页密码框加密输入不知道对错，加个小眼睛方便查看和修改，下面是小眼睛效果图，如果不喜欢这个图标可以自己去。（因为只把密码输入框展示出来了，所以样式自行调整，只给你们展示功能代码）
登录页面的密码的显示与隐藏
见证自己学习,成长的记录
08-30 5932
原理就是点击的时候把密码的输入框的类型从password切换到text,再次点击把text切换成password,懒的话可以直接声明按钮点击,美观点的话可以去阿里icon官网上选几个使用 效果 选择喜欢的icon以png的形式下载到本地放在项目中引用即可 丰富的icon资源:https://www.iconfont.cn/ 代码 <%-- Created by IntelliJ IDEA. User: wx_weiyihe Date: 2021/8/30 Time: 14:
JS实现密码框的显示密码和隐藏密码功能示例
11-28
本文实例讲述了JS实现密码框的显示密码和隐藏密码功能。分享给大家供大家参考，具体如下： 运行效果图如下： 完整实例代码： <html> <head> <meta http-equiv="Content-Type" content="text/html...
基于JavaScript实现表单密码的隐藏和显示出来
10-22
为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么...下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下
js实现密码隐藏及显示
08-11
用bootstrap-show-password.js插件实现纯js的input框显示隐藏密码的功能
JS实现登录页密码的显示和隐藏功能
10-18
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能。下面给大家介绍基于JS实现登录页密码的显示和隐藏功能，需要的朋友参考下吧
js显示和隐藏密码
csdnyq的博客
04-13 761
js显示和隐藏密码 <div class="col-8"> <span id="ori_pass_span"> <input class="form-control" id="passwd" type="password" size="13" /> </span> <input class="btn btn-primary" t...
JS显示隐藏密码明文
m0_54490098的博客
07-14 1600
JS显示隐藏密码明文
JavaScript-----显示隐藏密码案例
weixin_45904557的博客
05-07 642
happy
JavaScript 实现密码可见性切换（显示和隐藏）
linxiaoduo的博客
12-28 5941
默认情况下，输入的密码的 input 标签 type="password"，默认密码用小点或星号表示。要密码可见所以我们需要将type修改为"text"。在 Chrome、FireFox 等浏览器中通过修改 input 标签的 type 属性轻松实现该效果，但是 IE 下就会报错。如果你需要兼容IE，就必须考虑其他方案。 这里有几点需要说明的是： 示例使用了替换整个 input 标签方案，所以...
js简单实现密码的显示与隐藏
热门推荐
neverST的博客
09-19 1万+
使用js实现单击按钮时显示密码，再次单击时隐藏密码的循环切换功能。 源码： 1.通过getElementById获取到输入框的type和按钮。当按钮添加一个onclick事件，改变输入框的type值为text，使密码显示；再次点击时改变type值为password，使密码隐藏。 2.定义一个变量a并赋值为true，在第一次调用onclick事件后将其赋值为false，并通过 if 语句实
【JS】JS实现登录页密码的显示和隐藏
wan小小冰的博客
12-05 6495
在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能，其实实现原理很简单，通过点击事件来改变input的type类型，具体过程看代码：<ul class="form-area"> <li> <div class="item-content"> <div class="item-input"> &
JS实现密码的显示与隐藏（仿京东登录界面）
hannah2233的博客
07-18 2012
首先，上页面展示以及代码实现 其次，附上实现代码的相关知识点 首先 1. 页面展示 2. js的实现思路 点击眼睛，把密码框类型改为文本框就可以看见里面的密码 一个按钮两个状态，点击一次，切换为文本框，继续点击切换成密码框 算法： 利用一个flag变量，来判断flsg的值，如果是1就切换成文本框，flag设置为0；如果是0就切换成密码框，flg设置为1 3. 代码实现 html+css <div class="box"> <label for=""&gt..
案例 ： JS实现显示隐藏密码框
m0_61736351的博客
02-06 864
在实现本案例时，要清楚什么时显示隐藏密码框。在我们点击某个图标时，密码框中不可见的密码变为可见的数字，字母和符号的组合。 主要算法： 设置一个flag变量，当flag = 0 时，显示密码（password）；flag= 1时显示，显示文本（text）。 主要思路： 点击眼睛按钮，把密码框类型改为文本框可以看见里面 代码实现： <style> .box{ position: relative; width: 400
js 实现密码隐藏和显示
04-27
可以使用JavaScript来实现密码的隐藏和显示。具体方法如下： 1. 创建一个 input 元素，type 属性为 password，用于输入密码。 2. 创建一个 checkbox 元素，用于切换密码的隐藏和显示。 3. 通过 JavaScript 监听 checkbox 的点击事件，根据 checkbox 的状态切换 input 元素的 type 属性。 4. 当 checkbox 被选中时，将 input 元素的 type 属性改为 text，此时密码会显示出来。 5. 当 checkbox 被取消选中时，将 input 元素的 type 属性改回 password，此时密码会被隐藏起来。 以下是一个实现密码隐藏和显示的简单示例代码： HTML代码： ``` <label>密码：</label> <input type="password" id="password"> <label>显示密码：</label> <input type="checkbox" id="showPassword"> ``` JavaScript代码： ``` var password = document.getElementById("password"); var showPassword = document.getElementById("showPassword"); showPassword.addEventListener("click", function() { if (showPassword.checked) { password.type = "text"; } else { password.type = "password"; } }); ``` 当用户点击“显示密码”复选框时，JavaScript会切换密码输入框的 type 属性，从而实现密码的隐藏和显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值