input password显示明文密码

最新推荐文章于 2025-09-11 16:43:04 发布

原创最新推荐文章于 2025-09-11 16:43:04 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #css

js 同时被 2 个专栏收录

24 篇文章

订阅专栏

jquery

4 篇文章

订阅专栏

这是一个使用HTML、CSS和JavaScript实现的交互式登录界面，其中包含一个文本输入框用于账号，一个密码输入框用于输入密码，并且密码输入框旁边有一个图片按钮，点击可以切换显示/隐藏密码状态。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style type="text/css">
			img {
				vertical-align:top;
				width: 25px;
			}
		</style>
	</head>
<body>
		<input type="text" placeholder="账号" />
		<br /><br />
		<input type="password" value="" placeholder="请输入密码" id="mima">
		<img src="./img/close.png" alt="" id="showText" onclick="hideShowPsw();">
	<script>
			var demoImg = document.getElementById("showText");
			var mima = document.getElementById("mima");
			function hideShowPsw() {
				if (mima.type == "password") {
					mima.type = "text";
					demoImg.src = "./img/open.png";
				} else {
					mima.type = "password";
					demoImg.src = "./img/close.png";
				}
			}
	</script>
</body>
</html>