原声js实现显示密码功能，所有元素全部有注释，如有不懂，欢迎提问。我是萌新，大神勿喷

最新推荐文章于 2021-11-04 10:50:05 发布

Q.I

最新推荐文章于 2021-11-04 10:50:05 发布

阅读量264

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42665672/article/details/82684801

本博客展示了如何在HTML页面中实现密码输入时的显示与隐藏功能，通过JavaScript控制密码框的type属性，实现点击复选框切换密码显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style type="text/css">
			body {
				background: #eee;
			}
			input {
				margin: 2px;
			}
		</style>
	</head>
	<body>
		<form action="" method="post">
			<label for="pass"></label>
			<input type="password" name="pass" id="pass"/>
			<input type="checkbox" name="check" id="disp" onclick="on()"/>显示密码  <!-- onclick是点击事件，通过执行点击事件，点击到函数on()，来执行对应的on()函数 -->
		</form>
		<script type="text/javascript">
			//通过检测复选框是否选中，修改密码框type应该为password（不显示密码）还是text（显示密码），
			function on(){
				var disp = document.getElementById('disp'); //查找复选框（通过复选框实现显示密码的功能）
				var pass = document.getElementById('pass'); //查找密码框
				if(disp.checked){ //if判断是否复选框是否选中，disp为查找到的复选框，checked为检测函数（同时他在html中也是默认选中属性）
					pass.type = 'text'; //如果选中，即显示密码，执行修改密码框的type的属性值为text
				} else {
					pass.type = 'password'; //如果未选中，即不显示密码，执行修改密码框的type的属性值为password
				}
			}
		</script>
	</body>
</html>