首页
所有分类
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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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
西班牙购物网站(115) 印尼购物网站(37) 瑞士购物网站(28) 墨西哥购物网站(16) 埃及购物网站(2) 日本购物网站(72) 德国购物网站(227) 俄罗斯购物网站(137) 马来西亚购物网站(41) 印度购物网站(45)
You might like
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
Node.JS段点续传：Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
vue实现评价星星功能
2020/06/30 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
对Python中数组的几种使用方法总结
2018/06/28 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
澳大利亚的奢侈品牌：Oroton
2016/08/26 全球购物
节省高达65%的城市景点费用：Go City
2019/07/06 全球购物
三星加拿大官方网上商店：Samsung CA
2020/12/18 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
旷课检讨书大全
2014/01/21 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
争先创优个人总结
2015/03/04 职场文书