温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-06-29 13:38:18 阅读:183 作者:小新 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要为大家展示了“jQuery如何实现输入框密码的显示隐藏”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现输入框密码的显示隐藏”这篇文章吧。

效果图:

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";
 srcurl('iconfont.eot'); /* IE9*/
 srcurl('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-width0.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"; }

 * { padding0margin0; }
body { background#f2f2f2font-family:"微软雅黑"min-width320pxmax-width640pxmargin0 auto; }
ulli { list-style: none; }
iem { font-style: normal; }
img { border: none; margin0padding0; }
a { text-decoration: none; color#333; }
a:focus { outline: none; }
.clear { clear: both }
.clear_wl:after { content"."height0visibility: 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-size0.5rem; }
.f11 { font-size0.55rem; }
.f12 { font-size0.6rem; }
.f14 { font-size0.7rem; }
.f16 { font-size0.8rem; }
.f18 { font-size0.9rem; }
.all_wap { width15.5remmargin-left0.5rem; }
.all_center_box { width15remmargin0 auto; }
.footheight { height2.4rem; }
.mb5 { margin-bottom0.25rem; }
/*三种头部样式111111111*/
.heard_top { width100%background#00b4c9color#fffposition: relative; z-index2height2.2remline-height2.2rem; }
.heard_top .top_table { width15remmargin0 auto; }
.heard_top .top_table td { width50%font-size0.6rem; }
.heard_top .top_table td .dw_a_but { display: block; height2.2remcolor#fffwidth30%; }
.heard_top .top_table td .map_dw { color#ffffont-size0.7rem; }
.heard_top .top_texte { position: absolute; z-index22top0left50%text-align: center; width9.5remmargin-left: -4.75remfont-size0.8rem; }
/**/
.heard_top .top_texte .xieh_title_listwidth:7remmargin:0 auto; border:1px solid #e6f8faborder-radius:0.25remheight:1.4remline-height:1.4remtext-align:center; overflow:auto; margin-top:0.4rem;}
.heard_top .top_texte .xieh_title_list liwidth:50%float:left; }
.heard_top .top_texte .xieh_title_list li adisplay:block;color:#e6f8fafont-size:0.7rem;}
.heard_top .top_texte .xieh_title_list li.on abackground:#e6f8facolor:#00b4c9;}

/*1像素*/
.scale { position: relative; }
.scale:after { content""position: absolute; bottom0pxleft0pxright0pxborder-bottom1px solid #ddd; -webkit-transformscaleY(.5); -webkit-transform-origin0 0; }
/*底部*/
.ky_footer { width100%background#f8f8f8position: fixed; z-index999bottom0left0overflow: hidden; /* border: 1px solid #cfcfcf;*/ }
.ky_footer ul { width100%height: auto; overflow: hidden; }
.ky_footer ul li { float: left; width25%padding0.2rem 0 }
.ky_footer ul li a { font-size0.55remtext-align: center; width100%display: block; color#949494; }
.ky_footer ul li a i { font-size1.1remcolor#949494width100%display: block; text-align: center; overflow: hidden; }
.ky_footer ul li.selected i.ky_footer ul li.selected a { color#00b4c9 }
abuttoninput { -webkit-tap-highlight-colorrgba(255,0,0,0); }/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */
.ky_footer .scale:after { content""position: absolute; top0pxleft0pxright0pxborder-bottom1px solid #ddd; -webkit-transformscaleY(.5); -webkit-transform-origin0 0; }
/*列表通用*/
.wntj_list li { /*border-bottom:0.5px solid #e3e3e3;*/ font-size0.6rempadding0.25rem 0.5rem 0.5rem 0; }
.wntj_list li:last-child { border-bottom: none; }
.wntj_list li h5 { overflow: hidden; height: auto; font-size0.7remmargin-bottom0.25remfont-weight400; }
.wntj_list li p { height: auto; overflow: hidden; color#333margin-bottom0.25rem; }
.wntj_list li .gsfl_tb { height: auto; }
.wntj_list li .gsfl_tb span { font-size0.5remborder1px solid #3D99FFborder-radius3pxcolor#3D99FFpadding0 0.25remmargin-right0.25rem; }
/*图片模糊*/
.blur_mh { filterurl(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filterblur(10px); /* Chrome, Opera */ -moz-filterblur(10px); -ms-filterblur(10px); filterblur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}

/*清空input内容*/
.clear_input { display: none; position: absolute; width:0.8remheight0.8remborder-radius:50%margin0.6rem 0 0 0.75remoutline: none; background:#CCC ; font-size:0.6remcolor:#ffftext-align:center; }
.ClearInput::-ms-clear { display: none; }
.ClearInput:valid + .clear_input { display: inline; }

 body { background#FFF; }
/*表单样式*/
.input_text { height2remborder: none; text-align: right; color#999font-size0.7rem; }
.placeholder { color#999text-align: right; }
/*登陆注册*/
.login_reg { margin-top1rem; }
.login_reg li { background#FFFborder1px solid #dddmargin-bottom0.5removerflow: hidden; height2rem; }
.login_reg li i { color#999font-size0.8rempadding-left0.2rempadding-right0.25rem; }
.login_reg li .input_text_user { height2remborder: none; text-align: left; color#999width11.5remfont-size0.7rem; }
.login_reg li .input_text_password { height2remborder: none; text-align: left; color#999width11remfont-size0.7rem; }
.login_reg li .placeholder { color#999text-align: left; }
.login_reg li .eyes_box { display: inline-block; width1.5remtext-align: right; }
.login_reg li .wenz { padding-left0.25remfont-size0.7remcolor#333; }
.login_reg li .w180 { width9remmargin-left1rem; }
.login_reg .denglu_but { height2remline-height2remwidth15remdisplay: block; font-size0.8rembackground#00B4C9color#fffborder-radius0.25remtext-align: center; margin1rem 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>
<!--js-->
<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>

以上是“jQuery如何实现输入框密码的显示隐藏”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×