给密码框添加一个显示隐藏开关

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>密码显示隐藏</title>
	<style type="text/css">
		@charset "UTF-8";
		.ml2 {
			margin-left: 2rem;
		}
		.toggle {
			background: #ccc;
			border-radius: 40em;
			cursor: pointer;
			display: inline-block;
			padding: 1px;
			position: relative;
			width: 40px;
			height: 1.25rem;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			vertical-align: middle;
		}
		.toggle:before, .toggle:after {
			color: #777777;
			position: absolute;
			top: 50%;
			-webkit-transform: translatey(-50%);
			-ms-transform: translatey(-50%);
			transform: translatey(-50%);
		}
		.toggle:before {
			content: "";
			font-size: 10px;
			right: 110%;
		}
		.toggle:after {
			content: "ABC";
			font-size: 12px;
			left: 110%;
		}
		.toggle.is-alpha .toggle-button {
			left: 21px;
		}
		.toggle-button {
			background: #fff;
			border-radius: 40em;
			display: inline-block;
			height: 1.25rem;
			width: 1.25rem;
			position: absolute;
			left: 1px;
			top: 1px;
			-webkit-transition: left 0.05s linear;
			transition: left 0.05s linear;
		}
		.centerer {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<div class="centerer">
		<p>输入密码,点击右侧的开关查看效果</p>
		<input type="password" class="password" />
		<div class="toggle ml2">
			<div class="toggle-button"></div>
		</div>
	</div>
	<script type="text/javascript">
		(function () {
			$('.toggle').on('click', function () {
				var password, type;
				password = $('.password');
				type = password.attr('type');
				if (type === 'password') {
					password.attr('type', 'text');
					return $(this).addClass('is-alpha');
				} else {
					password.attr('type', 'password');
					return $(this).removeClass('is-alpha');
				}
			});
		}.call(this));
	</script>
</body>
</html>


你可能感兴趣的:(明文密码,密码转换,显示密码)