有很多时候,用户在进行表单注册的时候输入密码的时候,过于自信,没怎么看键盘,导致在输入的过程中,错了一个字符,然后在确认密码的时候,习惯性的又把错误的重新输入了一遍,这样就按照输错的密码注册成功了,但是在登录的时候,却总是输入原来的密码,却怎么都登录不上去,最后不得不通过密码找回或者放弃账号重新注册,不得不说,这提高了用户的使用成本,让用户觉得很累,甚至会离开我们的网站,那么,我们为什么不未雨绸缪,在输入密码的时候,制作一个密码显示的按钮,这样一来,用户输入完之后,可以点击按钮,查看所设置的密码是不是自己设想的密码,如果不是,还可以及时修改,您说,加上之后是不是很方便呢?下面就是简单的实现思路,我们一起来看看吧。
运行方法:把下面的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>
怎么样,是不是很方便呢?赶快把它应用到你的网站中去吧。