网站首页编程语言正文

jQuery实现点击显示密码框密码

作者：游标卡尺_. 更新时间： 2022-07-22 编程语言

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.dl {
				width: 300px;
				background: #f2f2f3;
				text-align: center;
			}
			
			.dl .log {
				font-size: 16px;
				font-weight: bold;
			}
			
			.dl form {
				margin-top: 15px;
				position: relative;
			}
			
			.dl form input {
				width: 200px;
				height: 45px;
				outline: none;
				margin-bottom: 10px;
				border: 1px solid #e5e5e5;
				padding: 0 10px;
				border-radius:5px;
			}
			
			.dl form button {
				margin-top: 5px;
				width: 220px;
				height: 45px;
				font-size:18px;
				border: none;
				border-radius: 5px;
				margin-bottom: 10px;
			}
			
			.dl form .btn {
				background: #03a9f4;
				color: white;
			}
			
			.ico_eye {
				background: url(../3dm/img/img-login.png) no-repeat;
				background-size: 48px auto;
				background-position: 0 -151px;
				width: 18px;
				height: 16px;
				position: absolute;
				right: 50px;
				top: 68px;
			}
			
			.ico_eye.on {
				background-position: -26px -151px;
			}
			

		</style>
	</head>
	<body>
		<div class="dl">
			<div class="log">账号登录</div>
			<div class="form-box">
				<form>
					<input type="text" placeholder="请输入手机号码" tabindex="1" class="name" size="30" autocomplete="off"><br>
					<div class="ico_eye"></div>
					<input type="password" placeholder="密码" tabindex="2" class="pwd" size="30"><br>
					<button class="btn">登录</button>
				</form>
			</div>
			
		</div>
		
		//引入jQuery
		<script src="js/jquery-3.6.0.js"></script>
		<script>
		//点击事件
			$(".ico_eye").click(function(){
			//如果有on  就删除 把 密码框type值改成password
				if($(".ico_eye").hasClass("on")){
					$(".ico_eye").removeClass("on")
					$("input[type='text']").attr("type","password")
				}else{
				//否则就添加on 把password改成text  就能看到密码
					$(".ico_eye").addClass("on")
					$("input[type='password']").attr("type","text")
				}
			})
		</script>
	</body>
</html>

效果
请添加图片描述

原文链接：https://blog.csdn.net/wwwwwwzzz/article/details/125918671

上一篇：Docker安装Seata分布式锁
下一篇：服务器配置uWSGI+Nginx+Django

网站首页 编程语言 正文

jQuery实现点击显示密码框密码

相关推荐

网站首页编程语言正文