日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

欄目分類
最近更新