首页
所有分类
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 04 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery实现简单全选框
Sep 13 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
根德(2) Panasonic(1) SRF-S83(1) 南麂列岛(1) PL660(1) 松下(1) SRF-S84(1) S2000(3) MX500(1) 台湾(1)
You might like
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
浅谈web上存漏洞及原理分析、防范方法（安全文件上存方法）
2013/06/29 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
Javascript倒计时代码
2010/08/12 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
删除节点的jquery代码
2014/01/13 Javascript
jQuery 回车事件enter使用示例
2014/02/18 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
Node.js pipe实现源码解析
2017/08/12 Javascript
JS实现图片切换效果
2018/11/17 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
Python读取网页内容的方法
2015/07/30 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
python 实现绘制整齐的表格
2019/11/18 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
德国骆驼商店：ActiveFashionWorld
2017/11/18 全球购物
学生会主席演讲稿
2014/04/25 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库