<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery显示隐藏密码插件jquery.toggle-password</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>
<!--可删除-->
<script src="http://www.jq22.com/js/jq.js"></script>
<!--ecd 可删除-->
</body>
</html>
jquery插件库-jquery显示隐藏密码插件.zip
版权申诉
79 浏览量
2023-03-15
05:11:39
上传
评论
收藏 34KB ZIP 举报
jquery插件库-jquery显示隐藏密码插件.zip （4个子文件） 
jquery插件库-jquery显示隐藏密码插件 js 
jquery.toggle-password.min.js 298B jquery-1.9.0.min.js 91KB jquery.toggle-password.js 464B
index.html 2KB资源评论
