<!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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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("♤");
$(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>
</head>
<body>
<!-- 代码部分begin -->
<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:" 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" style="display:none;" placeholder="请输入密码" >
<a class="eyes_box " data-show="1" href="javascript:void(0);"><i class="icon iconfont" >♠</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>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦