JS实现（form）显示密码功能

最新推荐文章于 2024-04-29 11:52:36 发布

原创最新推荐文章于 2024-04-29 11:52:36 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#JS显示密码 #js

JavaScript 同时被 2 个专栏收录

30 篇文章

订阅专栏

HTML

26 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript代码片段，用于实现网页登录表单中密码的显示与隐藏功能。通过一个复选框和JavaScript函数，用户可以选择是否显示输入的密码。

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

感觉挺简单的，直接上代码吧，看完应该就理解了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="">
		账号：<input type="text" id="username" /><br/>
		密码：<input type="password" id="password" /><br/>
		<label onchange="show_pwd()">
			<input type="checkbox" id="" />显示密码
		</label>
	</form>
	
	<script type="text/javascript">
	var pwd  = document.getElementById("password");
	
	function show_pwd(){
		if(pwd.type == "password"){
			pwd.type = "text";	// 改变input的属即可实现
		}else {
			pwd.type = "password";
		}
	}
	</script>
</body>
</html>

补充：

1.设置 label 标签是为了点击文字时，也会勾选CheckBox。

2.label 里面的事件还可以用onclick事件。

说明：这里只是介绍了一种方法，可能有多种方法可以实现该功能，可以自行发掘。

2019年9月26日更新：

添加测试网址：https://codepen.io/yansheng836/pen/WNemJEK