模仿输入显示和隐藏密码

最新推荐文章于 2022-02-24 11:38:58 发布

生人勿近�

最新推荐文章于 2022-02-24 11:38:58 发布

阅读量150

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/rskfj/article/details/107224882

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

模仿输入显示和隐藏密码

效果展示
在这里插入图片描述

方法如下 在这里插入图片描述
代码图片

复制如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div {
				width: 380px;
				margin: 50px auto;
				border-bottom: 1px solid #ccc;
				position: relative;
				padding-left: 20px;
			}
			input {
				width: 370px;
				border: none;
				outline: none;
			}
			img {
				width: 24px;
				position: absolute;
				top: -3px;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<div>
			<input type="password" id="pwd">
			<label><img src="images/close.png" id="img"></label>
		</div>
	</body>
<script type="text/javascript">
	var flag=0;
	document.getElementById('img').onclick=function(){
		if(flag==0){
			this.src="images/open.png";
			document.getElementById('pwd').type="text";
			flag=1;
		}
		else{
			this.src="images/close.png";
			document.getElementById('pwd').type="password";
			flag=0;
			
		}
	}
</script>
</html>