输入框密码显示或者隐藏jQuery-原创手记-慕课网

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>输入框密码显示或者隐藏jQuery</title>
    <style>
        ::-moz-selection{background:#FFE100; color:#fff; text-shadow:none;}
        ::selection{background:#008cd6; color:#fff; text-shadow:none;}
        html{overflow-x:hidden; overflow-y:auto; color:#1b78d0; background:#fff;}
        body{ font-size: 14px; -webkit-font-smoothing: antialiased; font-family:  "PingFangSC-Regular","Microsoft YaHei","WenQuanYi Micro Hei", sans-serif;}
        a{color:#999; text-decoration:none; cursor:pointer; outline: 0 none;}
        a:hover{color:#000; text-decoration:none;}
        a:focus{-moz-outline-style:none; border:0px;}
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure{margin:0; padding:0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
        ol,li,ul,dl,dt,dd{list-style:none;}
        fieldset,img{border:0;}
        h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:normal;}
        table{border-collapse:collapse; border-spacing:0;}
        sup{vertical-align:text-top;}
        sub{vertical-align:text-bottom;}
        input,textarea,select,button{font-family:inherit; font-size:inherit; font-weight:inherit; outline-style:none; outline-width:0pt; resize:none; padding: 0; margin: 0; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
        b,em,i{display:inline-block; vertical-align:middle; font-weight:normal; font-style:normal;}
        .cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} 
        .cl{ zoom:1;}
        /*表单样式*/
        .input_text { height: 2rem; border: none; text-align: right; color: #999; font-size: 0.7rem; }
        .placeholder { color: #999; text-align: right; }
        /*登陆注册*/
        .login_reg {width: 240px; margin: auto; 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="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function() {
        //查看密码
            $(".eyes_box").click(function(){
                if($(this).attr("data-show")==1){//明文
                    $(this).attr("data-show","2");
                    $(this).children("i").html("&#9828;");
                    $(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("&#9824;");
                    $(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> 
</head>
<body>
<!-- 代码部分begin -->
<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" >&#9824;</i></a> </li>
  </ul>
  <a href="#" class="denglu_but" >登录</a>
  <p align="center"> <a href="#" class="f12 c999" >忘记密码</a></p>
</div>
</div>
<!-- 代码部分end -->
</body>
</html>