jQuery如何实现输入框密码的显示隐藏

<!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"/>  <style type="text/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、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, 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"; } * { padding: 0; margin: 0; } body { background: #f2f2f2; font-family:"微软雅黑"; min-width: 320px; max-width: 640px; margin: 0 auto; } ul, li { list-style: none; } i, em { font-style: normal; } img { border: none; margin: 0; padding: 0; } a { text-decoration: none; color: #333; } a:focus { outline: none; } .clear { clear: both } .clear_wl:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; } .fl { float: left } .fr { float: right } .text_c { text-align: center; } /*主色调*/ .bule_color { color: #00b4c9; } /*辅助色*/ .hs_color { color: #FE9F07; } .green_color { color: #85c860; } .c333 { color: #333; } .c666 { color: #666; } .c999 { color: #999; } .f10 { font-size: 0.5rem; } .f11 { font-size: 0.55rem; } .f12 { font-size: 0.6rem; } .f14 { font-size: 0.7rem; } .f16 { font-size: 0.8rem; } .f18 { font-size: 0.9rem; } .all_wap { width: 15.5rem; margin-left: 0.5rem; } .all_center_box { width: 15rem; margin: 0 auto; } .footheight { height: 2.4rem; } .mb5 { margin-bottom: 0.25rem; } /*三种头部样式111111111*/ .heard_top { width: 100%; background: #00b4c9; color: #fff; position: relative; z-index: 2; height: 2.2rem; line-height: 2.2rem; } .heard_top .top_table { width: 15rem; margin: 0 auto; } .heard_top .top_table td { width: 50%; font-size: 0.6rem; } .heard_top .top_table td .dw_a_but { display: block; height: 2.2rem; color: #fff; width: 30%; } .heard_top .top_table td .map_dw { color: #fff; font-size: 0.7rem; } .heard_top .top_texte { position: absolute; z-index: 22; top: 0; left: 50%; text-align: center; width: 9.5rem; margin-left: -4.75rem; font-size: 0.8rem; } /**/ .heard_top .top_texte .xieh_title_list{ width:7rem; margin:0 auto; border:1px solid #e6f8fa; border-radius:0.25rem; height:1.4rem; line-height:1.4rem; text-align:center; overflow:auto; margin-top:0.4rem;} .heard_top .top_texte .xieh_title_list li{ width:50%; float:left; } .heard_top .top_texte .xieh_title_list li a{ display:block;color:#e6f8fa; font-size:0.7rem;} .heard_top .top_texte .xieh_title_list li.on a{ background:#e6f8fa; color:#00b4c9;} /*1像素*/ .scale { position: relative; } .scale:after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; border-bottom: 1px solid #ddd; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; } /*底部*/ .ky_footer { width: 100%; background: #f8f8f8; position: fixed; z-index: 999; bottom: 0; left: 0; overflow: hidden; /* border: 1px solid #cfcfcf;*/ } .ky_footer ul { width: 100%; height: auto; overflow: hidden; } .ky_footer ul li { float: left; width: 25%; padding: 0.2rem 0 } .ky_footer ul li a { font-size: 0.55rem; text-align: center; width: 100%; display: block; color: #949494; } .ky_footer ul li a i { font-size: 1.1rem; color: #949494; width: 100%; display: block; text-align: center; overflow: hidden; } .ky_footer ul li.selected i, .ky_footer ul li.selected a { color: #00b4c9 } a, button, input { -webkit-tap-highlight-color: rgba(255,0,0,0); }/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */ .ky_footer .scale:after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; border-bottom: 1px solid #ddd; -webkit-transform: scaleY(.5); -webkit-transform-origin: 0 0; } /*列表通用*/ .wntj_list li { /*border-bottom:0.5px solid #e3e3e3;*/ font-size: 0.6rem; padding: 0.25rem 0.5rem 0.5rem 0; } .wntj_list li:last-child { border-bottom: none; } .wntj_list li h5 { overflow: hidden; height: auto; font-size: 0.7rem; margin-bottom: 0.25rem; font-weight: 400; } .wntj_list li p { height: auto; overflow: hidden; color: #333; margin-bottom: 0.25rem; } .wntj_list li .gsfl_tb { height: auto; } .wntj_list li .gsfl_tb span { font-size: 0.5rem; border: 1px solid #3D99FF; border-radius: 3px; color: #3D99FF; padding: 0 0.25rem; margin-right: 0.25rem; } /*图片模糊*/ .blur_mh { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */ } /*清空input内容*/ .clear_input { display: none; position: absolute; width:0.8rem; height: 0.8rem; border-radius:50%; margin: 0.6rem 0 0 0.75rem; outline: none; background:#CCC ; font-size:0.6rem; color:#fff; text-align:center; } .ClearInput::-ms-clear { display: none; } .ClearInput:valid + .clear_input { display: inline; } 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; } </style>  <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> </head> <body>  <div class="login_reg all_center_box"> <ul> <li> <i class="icon iconfont"></i> <input name="" type="text" class="input_text_user ClearInput " placeholder="用户名/手机" required> <a href="javascript:" rel="external nofollow" class="clear_input">x</a> </li> <li> <i class="icon iconfont "></i> <input name="" type="password" class="input_text_password mima_dd " placeholder="请输入密码"> <input name="" type="text" class="input_text_password mima_wz" placeholder="请输入密码"> <a class="eyes_box " data-show="1" href="javascript:void(0);" rel="external nofollow" ><i class="icon iconfont"></i></a> </li> </ul> <a href="#" rel="external nofollow" rel="external nofollow" class="denglu_but">登录</a> <p align="center"> <a href="#" rel="external nofollow" rel="external nofollow" class="f12 c999">忘记密码</a> </p> </div> </body> <script type="text/javascript"> $(function() { //查看密码 $(".eyes_box").click(function(){ if($(this).attr("data-show")==1){//明文 $(this).attr("data-show","2"); $(this).children("i").html(""); $(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(""); $(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; } }); }); </script> </html>

相关阅读