点击显示/隐藏密码

最新推荐文章于 2023-03-31 18:02:37 发布

老米的世界

最新推荐文章于 2023-03-31 18:02:37 发布

阅读量827

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/MPFLY/article/details/78251286

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

网上看到也有很多事例，自己实际操作了一下。
主要就是操作input的type属性。
此处我使用的是jquery来操作。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
		$(function(){
			var eyeclose = $('.eyeclose');
			var eye = $('.eye');
			var password = $('#password');
			
			eyeclose.click(function(){
               
                eye.show();
                eyeclose.hide();
                password.attr("type","password");
            });
            eye.click(function(){
                eye.hide();
                eyeclose.show();
                password.attr("type","text");
            });
		});
    </script>
    
    <style type="text/css">
		#password{
			width: 200px;
			height: 35px;
			outline: none;
			border: 1px solid blue;
		}
		.eyeclose{
    		display: none;
    		cursor: pointer;
    	}
    	.eye{
    		cursor: pointer;
    	}
    </style>
</head>
<body>
	<div class="box">
		<input type="password" name="password" id="password" value=""/><br />
		<img class="eyeclose" src="img/eyeclose.svg"/><img class="eye" src="img/eye.svg" />
	</div>
</body>
</html>

老米的世界

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击显示/隐藏密码

网上看到也有很多事例，自己实际操作了一下。主要就是操作input的type属性。此处我使用的是jquery来操作。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scala
复制链接

扫一扫

专栏目录