有很多时候，用户在进行表单注册的时候输入密码的时候，过于自信，没怎么看键盘，导致在输入的过程中，错了一个字符，然后在确认密码的时候，习惯性的又把错误的重新输入了一遍，这样就按照输错的密码注册成功了，但是在登录的时候，却总是输入原来的密码，却怎么都登录不上去，最后不得不通过密码找回或者放弃账号重新注册，不得不说，这提高了用户的使用成本，让用户觉得很累，甚至会离开我们的网站，那么，我们为什么不未雨绸缪，在输入密码的时候，制作一个密码显示的按钮，这样一来，用户输入完之后，可以点击按钮，查看所设置的密码是不是自己设想的密码，如果不是，还可以及时修改，您说，加上之后是不是很方便呢？下面就是简单的实现思路，我们一起来看看吧。
运行方法：把下面的HTML源码按UTF-8编码保存为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 type="text/javascript"src=" http://www.liuzongyang.com/js/jquery-1.9.0.min.js"></script>
<script type="text/javascript"src=" http://www.liuzongyang.com/js/jquery.toggle-password.js"></script>
<script type="text/javascript">
$(function(){
$('#password').togglePassword({
el:'#togglePassword'
});
});
</script>
</head>
<body>
<h1 style="margin: 40px; font: 32pxMicrosoft Yahei; text-align: center;">jQuery显示密码小插件演示</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>
怎么样，是不是很方便呢？赶快把它应用到你的网站中去吧。
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
