jQuery隐藏与显示密码

开发工具与关键技术：DW与 HTML、jQuery
作者：谢钟焕
撰写时间：2019/03/31

在我们的登录页面呢密码的隐藏与显示是我们经常会用到的东西，所以我就使用了jQuery编写了一个显示与隐藏密码的案例。
HTML代码：

<div class="content">
	<div class="from">
		<div>
			<span class="innblock">用户名：</span>
			<input class="input_y" type="text" name="" placeholder="请输入用户名">
		</div>
		<div class="pass">
			<span class="innblock">密&nbsp;&nbsp;&nbsp;码：</span>
			<input class="input_m" type="password" passwordshow="1" name="" placeholder="请输入密码">
			<i class="eye"></i>
		</div>
	</div>
</div>

CSS代码：

*{	padding:0;	margin:0;}
.content{	width:80%;	height:auto;	text-align: center;	margin: auto;}
.from{	text-align: center;	width:80%;	margin:auto;}
.from div{	text-align:left;	margin:auto;}
.input_y,.input_m,.input_mx{
	margin: auto;	margin-top: 20px;	width: 200px;
	height: 30px;	border:1px solid #979797;	border-radius: 5px;}
.innblock{	display:inline-block;}
.eye{	display: inline-block;	width: 20px;	height: 20px;
	background: url(显示.png);	vertical-align:middle;    margin-top:7px;
	margin-left:5px;    margin-bottom:1px;}

一开始的时候，输入密码是看不见的，因为我给了input标签一个属性 “type=”password””

在密码input中我给了一个 自定义属性 “passwordshow” 用来判断是隐藏的还是显示的input
因为我这里使用了两个input标签。
//当点击图标时!

   $(".eye").click(function(){
    		if($(".input_m").attr("passwordshow") == 1){
    			if($(".pass").children("input").length < 2){
    				$(".pass input").after(	'<input style="display:none;" class="input_m" type="text" passwordshow="2" name="" placeholder="请输入密码">'	);	}
    			$(".eye").css("background","url('隐藏.png')");
    			$("[passwordshow='2']").val($("[passwordshow='1']").val());
    			$("[passwordshow='1']").remove();
    			$("[passwordshow='2']").show();
    		}else{
    			if($(".pass").children("input").length < 2){
    				$(".pass input").after(	'<input style="display:none;" class="input_m" type="password" passwordshow="1" name="" placeholder="请输入密码">'	);	}
    			$(".eye").css("background","url('显示.png')");
    			$("[passwordshow='1']").val($("[passwordshow='2']").val());
    			$("[passwordshow='2']").remove();
    			$("[passwordshow='1']").show();
    		}});

当点击图标时，我先判断他是否是显示状态 1为显示状态，2为隐藏状态。当为1的时候，然后判断input的有多少条，当条数少于2条的时候则添加一条 状态为2的input，然后改变图片链接，将1的值赋值给2，然后删除1，显示2。 2呢就是可以看见密码的。

之后就将2根1交换一下，这样就大功告成了。