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