jQuery输入框密码显示隐藏代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery输入框密码显示隐藏代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>jQuery输入框密码显示隐藏代码</title>
<!--手机端需要添加-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--基础样式-->
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/mobile_base.css">
<!--页面样式-->
<link rel="stylesheet" type="text/css" href="css/me.css">
<!--js-->
<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/app_mian.js"></script>
</head>
<body>
<!--头部展示-->
<div>
<div class="login_reg all_center_box">
  <ul>
    <li> <i class="icon iconfont" >&#xe620;</i>
      <input name="" type="text" class="input_text_user ClearInput " placeholder="用户名/手机" required  ><a href="javascript:" class="clear_input">x</a>
    </li>
    <li> <i class="icon iconfont " >&#xe606;</i>
      <input name="" type="password" class="input_text_password mima_dd " placeholder="请输入密码" >
      <input name="" type="text" class="input_text_password mima_wz" style="display:none;" placeholder="请输入密码" >
      <a class="eyes_box " data-show="1" href="javascript:void(0);"><i class="icon iconfont" >&#xe624;</i></a> </li>
  </ul>
  <a href="#" class="denglu_but" >登录</a>
  <p align="center"> <a href="#" class="f12 c999" >忘记密码</a></p>
</div>
</div>
</body>
</html>

JS代码(app_mian.js):

$(function(){
	//鏌ョ湅瀵嗙爜$(".eyes_box").click(function(){
	if($(this).attr("data-show")==1){
	//鏄庢枃$(this).attr("data-show","2");
	$(this).children("i").html("&#xe627;
	");
	$(this).parent("li").children(".mima_dd").hide();
	$(this).parent("li").children(".mima_wz").show();
	$(this).parent("li").children(".mima_wz").val($(this).parent("li").children(".mima_dd").val());
	return;
}
if($(this).attr("data-show")==2){
	//瀵嗘枃$(this).attr("data-show","1");
	$(this).children("i").html("&#xe624;
	");
	$(this).parent("li").children(".mima_dd").show();
	$(this).parent("li").children(".mima_wz").hide();
	$(this).parent("li").children(".mima_dd").val($(this).parent("li").children(".mima_wz").val());
	return;
}
}
);
}
);

CSS代码(iconfont.css):

@font-face{font-family:"iconfont";src:url('iconfont.eot');/* IE9*/
 src:url('iconfont.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
 url('iconfont.woff') format('woff'),/* chrome銆乫irefox */
 url('iconfont.ttf') format('truetype'),/* chrome銆乫irefox銆乷pera銆丼afari,Android,iOS 4.2+*/
 url('iconfont.svg#iconfont') format('svg');/* iOS 4.1- */
}
.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}
.icon-suoyoulianxiren:before{content:"\e600";}
.icon-suo:before{content:"\e606";}
.icon-wo2:before{content:"\e601";}
.icon-sousuo:before{content:"\e619";}
.icon-shezhi:before{content:"\e602";}
.icon-wo01:before{content:"\e603";}
.icon-bofang:before{content:"\e622";}
.icon-yanjing:before{content:"\e627";}
.icon-bianjimingpianline37:before{content:"\e604";}
.icon-wodemingpianline:before{content:"\e605";}
.icon-yirenzheng:before{content:"\e608";}
.icon-shenqingjieshourenwu:before{content:"\e609";}
.icon-jinlingyingcaiwangtubiao53:before{content:"\e60a";}
.icon-jinlingyingcaiwangtubiao11:before{content:"\e621";}
.icon-qiyerenzheng:before{content:"\e60b";}
.icon-dingwei:before{content:"\e60c";}
.icon-xiala:before{content:"\e61a";}
.icon-shangla:before{content:"\e61b";}
.icon-shoujirenzheng:before{content:"\e60d";}
.icon-yanjingkai:before{content:"\e624";}
.icon-filter:before{content:"\e61c";}
.icon-shoucang:before{content:"\e607";}
.icon-shoucang1:before{content:"\e61d";}
.icon-youjiantou:before{content:"\e61e";}
.icon-yonghukong:before{content:"\e620";}
.icon-fanhui:before{content:"\e618";}
.icon-auth:before{content:"\e60e";}
.icon-shanchu:before{content:"\e623";}
.icon-xiangji:before{content:"\e626";}
.icon-xueli111:before{content:"\e611";}
.icon-gongzuoshijian:before{content:"\e612";}
.icon-gongzuojingyandl:before{content:"\e613";}
.icon-fujin1:before{content:"\e614";}
.icon-fujin2:before{content:"\e615";}
.icon-xiaoxi1:before{content:"\e60f";}
.icon-xiaoxi2:before{content:"\e610";}
.icon-shouye1:before{content:"\e616";}
.icon-shouye2:before{content:"\e617";}
.icon-dianhua1:before{content:"\e61f";}

CSS代码(me.css):

body{background:#FFF;}
/*琛ㄥ崟鏍峰紡*/
.input_text{height:2rem;border:none;text-align:right;color:#999;font-size:0.7rem;}
.placeholder{color:#999;text-align:right;}
/*鐧婚檰娉ㄥ唽*/
.login_reg{margin-top:1rem;}
.login_reg li{background:#FFF;border:1px solid #ddd;margin-bottom:0.5rem;overflow:hidden;height:2rem;}
.login_reg li i{color:#999;font-size:0.8rem;padding-left:0.2rem;padding-right:0.25rem;}
.login_reg li .input_text_user{height:2rem;border:none;text-align:left;color:#999;width:11.5rem;font-size:0.7rem;}
.login_reg li .input_text_password{height:2rem;border:none;text-align:left;color:#999;width:11rem;font-size:0.7rem;}
.login_reg li .placeholder{color:#999;text-align:left;}
.login_reg li .eyes_box{display:inline-block;width:1.5rem;text-align:right;}
.login_reg li .wenz{padding-left:0.25rem;font-size:0.7rem;color:#333;}
.login_reg li .w180{width:9rem;margin-left:1rem;}
.login_reg .denglu_but{height:2rem;line-height:2rem;width:15rem;display:block;font-size:0.8rem;background:#00B4C9;color:#fff;border-radius:0.25rem;text-align:center;margin:1rem auto 0.25rem auto;}
.input_text_user::-webkit-input-placeholder,.input_text_password::-webkit-input-placeholder{color:#999;}
.input_text_user::-moz-placeholder,.input_text_password::-moz-placeholder{color:#999;}

附件:下载该文件资源,减少时间成本(增值服务)