可显示隐藏密码切换的jQuery插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是可显示隐藏密码切换的jQuery插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>可显示隐藏密码切换的jQuery插件</title>
<style>
* { margin: 0; padding: 0;}
body { font: 14px Arial, sans-serif; color: #333;}
input { font-family: Arial, sans-serif;}
.login { width: 270px; margin: 0 auto; padding: 30px 40px; background-color: #f7f7f7;}
.login ul { list-style-type: none;}
.login li { padding: 10px 0; overflow: hidden;}
.login .li3, .login .li5 { text-align: right; font-size: 12px;}
.login .li3 input { width: 13px; height: 13px; margin: 0 3px 0 10px; vertical-align: middle;}
.login .submit { display: block; width: 100%; padding: 6px 0; border: 0 none; color: #fff; background-color: #4d90fe; cursor: pointer;}
#email, #password { width: 214px; padding: 5px; border: 1px solid #ccc;}
.forgot { color: #333;}
</style>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.toggle-password.js"></script>
<script>
$(function(){
	$('#password').togglePassword({
		el: '#togglePassword'
	});
});
</script>
</head>
<body>
<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">jQuery显示隐藏密码插件jquery.toggle-password演示</h1>

<div class="login">
	<ul>
		<li><span><label for="email">邮箱：</label></span><input id="email" type="text"></li>
		<li><span><label for="password">密码：</label></span><input id="password" type="password"></li>
		<li class="li3"><input type="checkbox" id="remember"><label for="remember">记住密码</label> <input type="checkbox" id="togglePassword"><label for="togglePassword">显示密码</label></li>
		<li class="li4"><input class="submit" type="submit" value="登录"></li>
		<li class="li5"><a class="forgot" href="javascript:">忘记密码？</a></li>
	</ul>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)