实用的jQuery显示密码小插件

文章由LinuxBoy分享于2019-03-31 09:03:16热评（628）

实用的jQuery显示密码小插件

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

演示地址： l

运行方法：把下面的HTML源码按ansi编码保存为index.html，保存退出，然后双击运行，运行效果图见下图：

实用的jQuery显示密码小插件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery显示密码小插件_帮客之家</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="帮客之家(www.bkjia.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="帮客之家"/>
<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=" ">帮客之家简介</a> - <a href="">广告服务</a> - <a href="">帮助信息</a> - <a href="">联系我们</a><br />本站（LinuxIDC）所刊载文章不代表同意其说法或描述，仅为提供更多信息，也不构成任何建议。<br /><script type="text/javascript" language="javaScript" src="

jQuery实战中文PDF+源码

《jQuery即学即用（双色）》 PDF+源代码

锋利的jQuery(第2版) 完整版PDF+源码

jQuery完成带复选框的表格行高亮显示

jQuery基础教程(第4版) PDF 完整高清版+配套源码

推荐文章：

实用的jQuery显示密码小插件