有很多時候，用戶在進行表單注冊的時候輸入密碼的時候，過於自信，沒怎麼看鍵盤，導致在輸入的過程中，錯了一個字符，然後在確認密碼的時候，習慣性的又把錯誤的重新輸入了一遍，這樣就按照輸錯的密碼注冊成功了，但是在登錄的時候，卻總是輸入原來的密碼，卻怎麼都登錄不上去，最後不得不通過密碼找回或者放棄賬號重新注冊，不得不說，這提高了用戶的使用成本，讓用戶覺得很累，甚至會離開我們的網站，那麼，我們為什麼不未雨綢缪，在輸入密碼的時候，制作一個密碼顯示的按鈕，這樣一來，用戶輸入完之後，可以點擊按鈕，查看所設置的密碼是不是自己設想的密碼，如果不是，還可以及時修改，您說，加上之後是不是很方便呢？下面就是簡單的實現思路，我們一起來看看吧。
演示地址： http://www.linuxidc.com/yanshi/2014/04/03/index.html
運行方法：把下面的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 rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<meta name="description" content="Linux公社(www.linuxidc.com)是專業的Linux系統門戶網站，實時發布最新Linux資訊，包括Linux、Ubuntu、Fedora、RedHat、紅旗Linux、Linux教程、Linux認證、SUSE Linux、Android、Oracle、Hadoop等技術。"/>
<meta name="keywords" content="jQuery顯示密碼小插件,Linux,Ubuntu,Fedora,RedHat,紅旗Linux,Linux教程,Linux系統,Linux安裝,SUSE Linux,Android,Oracle"/>
<meta name="generator" content="Linux公社"/>
<meta name="generator" content="Linux"/>
<meta name="generator" 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=" http://www.linuxidc.com/yanshi/2014/04/03/jquery-1.9.0.min.js "></script>
<script type="text/javascript"src=" http://www.linuxidc.com/yanshi/2014/04/03/jquery.toggle-password.js "></script>
<script type="text/javascript">
$(function(){
$('#password').togglePassword({
el:'#togglePassword'
});
});
</script>
</head>
<body>
<h1 >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>
<P align="center">
<a href="http://www.linuxidc.com/aboutus.htm">Linux公社簡介</a> - <a href="http://www.linuxidc.com/adsense.htm">廣告服務</a> - <a href="http://www.linuxidc.com/sitemap.aspx">網站地圖</a> - <a href="http://www.linuxidc.com/help.htm">幫助信息</a> - <a href="http://www.linuxidc.com/contactus.htm">聯系我們</a><br />本站（LinuxIDC）所刊載文章不代表同意其說法或描述，僅為提供更多信息，也不構成任何建議。<br /><script type="text/javascript" language="javaScript" src="http://www.linuxidc.com/linuxfile/qq.js"></script><br />
本站帶寬由[<a href="http://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="http://www.linuxidc.com/topicnews.aspx?tid=2">Ubuntu專題</A> <A title=Fedora href="http://www.linuxidc.com/topicnews.aspx?tid=5">Fedora專題</A> <A title=Android href="http://www.linuxidc.com/topicnews.aspx?tid=11">Android專題</A> <A title=Oracle href="http://www.linuxidc.com/topicnews.aspx?tid=12">Oracle專題</A> <A title=Hadoop href="http://www.linuxidc.com/topicnews.aspx?tid=13">Hadoop專題</A> <A title=SUSE href="http://www.linuxidc.com/topicnews.aspx?tid=3">SUSE專題</A> <A title=紅旗Linux href="http://www.linuxidc.com/topicnews.aspx?tid=1">紅旗Linux專題</A> <A title=RedHat href="http://www.linuxidc.com/topicnews.aspx?tid=10">RedHat專題</A> <A title=CentOS href="http://www.linuxidc.com/topicnews.aspx?tid=14">CentOS專題</A><br />Copyright © 2006-2014 <a href="http://www.linuxidc.com/">Linux公社</a></P>
</body>
</html>
怎麼樣，是不是很方便呢？趕快把它應用到你的網站中去吧。
jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡
