首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery输入框密码的显示隐藏【代码分享】

Posted in jQuery onApril 29, 2017

效果图：

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 h4 { 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>
<!--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" style="display:none;" 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输入框密码的显示隐藏【代码分享】

- Author -

rolitter

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
详解jQuery如何实现模糊搜索
May 10 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jQuery实现多张图片上传预览（不经过后端处理）
Apr 29 #jQuery
jQuery设置图片等比例缩小的方法
Apr 29 #jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 #jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 #jQuery
jquery实现图片上传前本地预览
Apr 28 #jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
jQuery tip提示插件（实例分享）
Apr 28 #jQuery
根德5570(1) SONY600GR(1) 239军机(1) YAESU(1) DE1103(2) DE1107(3) WR-800F(1) 胆机(1) R9700(1) DE1105(1)
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
PHP生成条形图的方法
2014/12/10 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
JavaScript 学习笔记（十五）
2010/01/28 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
javascript解三阶幻方（九宫格）
2015/04/22 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
Python常用库推荐
2016/12/04 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
Tiqets荷兰：出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
2014学雷锋活动心得体会
2014/03/10 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
视光学专业自荐信
2014/06/24 职场文书
第二次离婚起诉书
2015/05/18 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python