有很多时候，用户在进行表单注册的时候输入密码的时候，过于自信，没怎么看键盘，导致在输入的过程中，错了一个字符，然后在确认密码的时候，习惯性的又把错误的重新输入了一遍，这样就按照输错的密码注册成功了，但是在登录的时候，却总是输入原来的密码，却怎么都登录不上去，最后不得不通过密码找回或者放弃账号重新注册，不得不说，这提高了用户的使用成本，让用户觉得很累，甚至会离开我们的网站，那么，我们为什么不未雨绸缪，在输入密码的时候，制作一个密码显示的按钮，这样一来，用户输入完之后，可以点击按钮，查看所设置的密码是不是自己设想的密码，如果不是，还可以及时修改，您说，加上之后是不是很方便呢？下面就是简单的实现思路，我们一起来看看吧。
运行方法：把下面的HTML源码按ansi编码保存为index.html，保存退出，然后双击运行，运行效果图见下图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery显示密码小插件_Linux公社</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link href="https://www.linuxidc.com/favicon.ico" type="image/x-icon"/>
<link href="https://www.linuxidc.com/favicon.ico" type="image/x-icon"/>
<meta content="Linux公社()是专业的Linux系统门户网站，实时发布最新Linux资讯，包括Linux、Ubuntu、Fedora、RedHat、红旗Linux、Linux教程、Linux认证、SUSE Linux、Android、Oracle、Hadoop等技术。"/>
<meta content="jQuery显示密码小插件,Linux,Ubuntu,Fedora,RedHat,红旗Linux,Linux教程,Linux系统,Linux安装,SUSE Linux,Android,Oracle"/>
<meta content="Linux公社"/>
<meta content="Linux"/>
<meta content="专业的Linux网站"/>
<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=" "></script>
<script type="text/javascript"src=" "></script>
<script type="text/javascript">
$(function(){
$('#password').togglePassword({
el:'#togglePassword'
});
});
</script>
</head>
<body>
<h1>jQuery显示密码小插件演示</h1>
<div>
<ul>
<li><span>
<label for="email">邮箱：</label>
</span>
<input type="text">
</li>
<li><span>
<label for="password">密码：</label>
</span>
<input type="password">
</li>
<li>
<input type="checkbox">
<label for="remember">记住密码</label>
<input type="checkbox">
<label for="togglePassword">显示密码</label>
</li>
<li>
<input type="submit" value="登录">
</li>
<li><ahref="javascript:">忘记密码？</a></li>
</ul>
</div>
<P>
<a href="https://www.linuxidc.com/aboutus.htm">Linux公社简介</a> - <a href="https://www.linuxidc.com/adsense.htm">广告服务</a> - <a href="https://www.linuxidc.com/sitemap.aspx">网站地图</a> - <a href="https://www.linuxidc.com/help.htm">帮助信息</a> - <a href="https://www.linuxidc.com/contactus.htm">联系我们</a><br />本站（LinuxIDC）所刊载文章不代表同意其说法或描述，仅为提供更多信息，也不构成任何建议。<br /><script type="text/javascript" language="javaScript" src="https://www.linuxidc.com/linuxfile/qq.js"></script><br />
本站带宽由[<a href="https://www.6688.cc"><font color="red">6688.CC</font></A>]友情提供及技术支持<br>关注Linux，关注LinuxIDC.com，<font color="red">请向您的QQ好友宣传LinuxIDC.com</font>，多谢支持！<br /><A title=Ubuntu href="https://www.linuxidc.com/topicnews.aspx?tid=2">Ubuntu专题</A> <A title=Fedora href="https://www.linuxidc.com/topicnews.aspx?tid=5">Fedora专题</A> <A title=Android href="https://www.linuxidc.com/topicnews.aspx?tid=11">Android专题</A> <A title=Oracle href="https://www.linuxidc.com/topicnews.aspx?tid=12">Oracle专题</A> <A title=Hadoop href="https://www.linuxidc.com/topicnews.aspx?tid=13">Hadoop专题</A> <A title=SUSE href="https://www.linuxidc.com/topicnews.aspx?tid=3">SUSE专题</A> <A title=红旗Linux href="https://www.linuxidc.com/topicnews.aspx?tid=1">红旗Linux专题</A> <A title=RedHat href="https://www.linuxidc.com/topicnews.aspx?tid=10">RedHat专题</A> <A title=CentOS href="https://www.linuxidc.com/topicnews.aspx?tid=14">CentOS专题</A><br />Copyright © 2006-2014 <a href="https://www.linuxidc.com/">Linux公社</a></P>
</body>
</html>
怎么样，是不是很方便呢？赶快把它应用到你的网站中去吧。