原理是建立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. monitor system

    #!/bin/bash # #Snapshot_Stats - produces a report for system stats # This report will mail to root. ...

  2. codeforces 519C. A and B and Team Training 解题报告

    题目链接:http://codeforces.com/contest/519/problem/C 题目意思:给出 n 个  experienced participants  和 m 个 newbie ...

  3. .net在当前日期的基础上加一天

    比如今天是:2015-11-10 18:57:01,在这个基础上加一天,那么就是2015-11-11 18:57:01,代码如下: DateTime now_dt = DateTime.Now; ). ...

  4. iOS注册collcetionViewFlowLayout

    self.arr = [[NSMutableArray alloc] init]; for (int i = 0; i < 9; i++) { [self.arr addObject:[UIIm ...

  5. 25个增强iOS应用程序性能的提示和技巧(高级篇)(2)

    25个增强iOS应用程序性能的提示和技巧(高级篇)(2) 2013-04-16 14:56 破船之家 beyondvincent 字号:T | T 在开发iOS应用程序时,让程序具有良好的性能是非常关 ...

  6. 有关Java的优秀博客集锦

    1. 在java编程中,多线程并发总有些疑惑:如为什么会产生并发?并发会有什么影响?java中提供了哪些处理并发的技术(机制) 关于并发产生的原因,我查了一些资料目前发现有两种原因:一,存在共享的资源 ...

  7. XMPP框架下微信项目总结（4）重新连接服务器

    xmpp 很多功能是面向模块开发的 例如电子名片 无须自己去写请求的代码XMPP(文件)->Extension(存放的是各个模块)->Reconnect(自动连接模块)          ...

  8. poj2912(种类并查集+枚举)

    题目:http://poj.org/problem?id=2912 题意:n个人进行m轮剪刀石头布游戏(0<n<=500,0<=m<=2000),接下来m行形如x, y, ch ...

  9. NYOJ题目457大小写互换

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsUAAAIUCAIAAAB9y8bFAAAgAElEQVR4nO3dPW7bTNsG0G8T7r0Qt/

  10. ThinkPHP入门(二)

    smarty使用 smarty引入流程 1. 控制器IndexAction.class.php function index() $this -> display(); (父类Action的di ...