原理是建立2个input，一个type是text，一个type是password。在点击按钮时，这两input个的显示状态与val（）的值在切换。

html：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8" />

 <title>案例测试</title>

 <link rel="stylesheet" href="css/all.css" />

 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

 <script type="text/javascript" src="js/all.js"></script>

 </head>

 <body>

 <!-- 密码的显示与隐藏 -->

 <div class="code">

     <span>密码：</span><input type="password" /><input type="text" class="hide" /><a>SHOW</a>

 </div>

 <!-- End 密码的显示与隐藏 -->

 </body>

 </html>

css：

 /* 公共样式 */

 * { padding:; margin:; list-style: none; }

 .hide { display: none; }

 /* 密码的显示与隐藏 */

 .code { margin: 50px 0 0 100px; }

 .code input { margin: 0 10px; padding: 10px 0 10px 10px; height: 20px; line-height: 20px; }

 .code  a { display: inline-block; padding: 0 14px; line-height: 30px; background: #ddf; cursor: pointer; }

js：

 $(function(){

 //密码的显示与隐藏

     //alert('lll');

     $('.code a').on('click',function(){

         if($(this).html() == 'SHOW'){

             $(this).html('HIDE')

                    .siblings('input[type=text]').css('display','inline-block')

                    .siblings('input[type=password]').css('display','none')

                    ;

             $(this).siblings('input[type=text]').val($(this).siblings('input[type=password]').val());

         }else{

             $(this).html('SHOW')

                    .siblings('input[type=text]').css('display','none')

                    .siblings('input[type=password]').css('display','inline-block')

                    ;

             $(this).siblings('input[type=password]').val($(this).siblings('input[type=text]').val());

         }

     })

 })

js也可以换成下面的代码，只不过是换了一个函数：当a被点击时，在两个function之间进行切换。

     $('.code a').toggle(function(){

         $(this).html('HIDE')

                .siblings('input[type=text]').css('display','inline-block')

                .siblings('input[type=password]').css('display','none')

                ;

         $(this).siblings('input[type=text]').val($(this).siblings('input[type=password]').val());

     },function(){

         $(this).html('SHOW')

                .siblings('input[type=text]').css('display','none')

                .siblings('input[type=password]').css('display','inline-block')

                ;

         $(this).siblings('input[type=password]').val($(this).siblings('input[type=text]').val());

     })

js控制密码的显示与隐藏实例的更多相关文章

  1. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  2. JS控制元素的显示和隐藏

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementB ...

  3. js控制元素的显示与隐藏

    <body class="easyui-layout"> <div id = "centerId" data-options="re ...

  4. 原生JS的移入溢出控制div的显示与隐藏

    原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性

  5. JS实现登录页密码的显示和隐藏功能

    在登录页经常会用到通过点击文本框的类似小眼睛图片来实现隐藏显示密码的功能,其实实现原理很简单,通过点击事件来改变input的type类型,具体过程看代码: 在没给大家分享实现代码之前,先给大家展示下效 ...

  6. legend3---19、要更多的从服务器端控制元素的显示和隐藏，而不要是页面端

    legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...

  7. IOS swift实现密码的显示与隐藏切换

    最近做项目遇到一个需要做密码的显示与隐藏功能,简单从功能上讲是比较简单的,但是,ios有个恶心的BUG,就是在切换显示密码后再隐藏密码时输入就被清空了,这个非常不友好,为了解决这个问题,我在网上找了相 ...

  8. css3-10 如何控制元素的显示和隐藏（display和visibility的区别是什么）

    css3-10 如何控制元素的显示和隐藏(display和visibility的区别是什么) 一.总结 一句话总结:使用的时候直接在元素的样式中设置display和visibility属性即可.推荐使 ...

  9. 微信小程序点击控制元素的显示与隐藏

    微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...

随机推荐

  1. windows系统下ftp上传下载和一些常用命令

    先假设一个ftp地址 用户名 密码 FTP Server: home4u.at.china.com User: yepanghuang Password: abc123 打开windows的开始菜单, ...

  2. 【leetcode】Reverse Words in a String(hard)☆

    Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...

  3. 【leetcode】LRU Cache(hard)★

    Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...

  4. Odoo创建数据库时出现的问题 DataError: new encoding (UTF8) is incompatible with the encoding of the template database (SQL_ASCII)

    解决方案: 执行如下指令进入PostgreSQL控制台: sudo -u postgres psql postgres 然后在PostgreSQL控制下按顺序执行如下指令: update pg_dat ...

  5. The certificate used to sign "XXX" has either expired or has been revoked

    在Xcode真机调试开发过程中,无论是使用个人证书或者是企业证书,经常会遇到这样的问题:The certificate used to sign "XXX" has either ...

  6. Roadblocks（poj 3255）

    题意:给出n个点,m条双向边,求严格次短路. /* 先spfa预处理出起点到每个点的和每个点到终点的最短距离,然后枚举每条边(这条边必须走),计算此时的最短路径,得出严格次短路. 正确性:因为对于一条 ...

  7. ecgcd(解二元不定方程)

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=775 关于扩展欧几里得算法还是推一遍好啦: 有方程:a*x+b*y=d=gcd(a, b) ...

  8. candence 笔记总结

    1.解决candece 启动后提示找不到licence文件的错误: candece的安装就不说了,按照破解步骤一步一步来就行了,但是装完后发现每次启动都会报错 "OrCAD Capture ...

  9. Redis不同数据类型的的数据结构实现

    我们知道Redis支持五种数据类型, 分别是字符串.哈希表(map).列表(list).集合(set)和有序集合,和Java的集合框架类似,不同数据类型的数据结构实也是不一样的. >>Re ...

  10. Delphi字符串的基本操作与常用函数

    参考:http://www.cnblogs.com/pchmonster/archive/2011/12/16/2290034.html 结合这个博客一起学习:http://www.cnblogs.c ...