原理是建立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. 【编程题目】n 个骰子的点数

    67.俩个闲玩娱乐(运算).2.n 个骰子的点数.把 n 个骰子扔在地上,所有骰子朝上一面的点数之和为 S.输入 n,打印出 S 的所有可能的值出现的概率. 思路:用递归把每个骰子的可能情况变量,记录 ...

  2. JS 保留两位小数问题收集

    1.使用四舍五入的方法,保留小数点后的两位小数: toFixed里面的参数表示保留的小数的位数,范围是0-20,超过20位就会报错了 <script> var num=22.127456; ...

  3. Jquery选中行实现行中的Checkbox的选中与取消选中

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...

  4. Mysql undo与redo Log

    http://mysql.taobao.org/monthly/2015/04/01/ http://www.cnblogs.com/Bozh/archive/2013/03/18/2966494.h ...

  5. Destination Host Unreachable

    自己的Linux 机器连不上服务器了,ping XXXX的时候报这个错误了 看了一下是因为IP的原因==>进入Linux的图形界面==>System==>Administration ...

  6. 从xml中构建sqlSessionFactory

    String resource = "org/mybatis/example/Configuration.xml"; Reader reader = Resources.getRe ...

  7. 瞧一瞧迷一般的SQLDA

    With static SQL, host variables used in embedded SQL statements are known at application compile tim ...

  8. 按键消抖-----verilog

    实际系统中常用的按键大部分都是轻触式按键,如下图所示.该按键内部由一个弹簧片和两个固定触点组成,当弹簧片被按下,则两个固定触点接通,按键闭合.弹簧片松开,两个触点断开,按键也就断开了.根据这种按键的机 ...

  9. Ubuntu 14.04 Trusty安装java环境

    原文:Install Oracle Java 6, 7, or 8 in Ubuntu 14.04 Trusty 命令如下: sudo add-apt-repository ppa:webupd8te ...

  10. jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等（二）

    Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar ...