原理是建立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 disk

    #!/bin/bash # #top #Big_USERS - find big disk space users in various directories ################### ...

  2. codeforces 582A. GCD Table 解题报告

    题目链接:http://codeforces.com/problemset/problem/582/A 网上很多题解,就不说了,直接贴代码= = 官方题解: http://codeforces.com ...

  3. 【python】Python遍历dict的key最高效的方法是什么？

    来源:https://segmentfault.com/q/1010000002581747 方法一:直接遍历 速度快 for key in _dict: pass 方法二:iterkeys() 速度 ...

  4. php继承、多态

    继承: 概念:子类可以继承父类的一切 特点:单继承:一个子类只能有一个父类,一个父类可以派生出多个子类 方法重写:在子类里面对父类的方法进行重写. 重写:override 重载,编译多态:overlo ...

  5. yii和php的一些细节

    yii   index.php ini_set("display_errors", 1); iconv这个函数不能直接用 需要检测!!! function gb2312_utf8( ...

  6. Spring面向切面编程(AOP)

    1 spring容器中bean特性 Spring容器的javabean对象默认是单例的. 通过在xml文件中,配置可以使用某些对象为多列. Spring容器中的javabean对象默认是立即加载(立即 ...

  7. iOS真机调试

    备注:本阶段之前的修改配置文件.准备脚本等,只需要做一次.但本阶段的操作,对每个需要真机调试的工程都要做一遍. ① 禁用Xcode自动的签名操作 将工程配置“Build Settings”中所有的Co ...

  8. nginx 配一个简单的静态文件服务器 和一个虚似机

    下面是个图片服务器: server { listen ; server_name img.xxx.xxx.com; root /data/site/img.xxx.xxx.com; access_lo ...

  9. Linux 标准目录结构

    初学Linux,首先需要弄清Linux 标准目录结构 / root --- 启动Linux时使用的一些核心文件.如操作系统内核.引导程序Grub等. home --- 存储普通用户的个人文件 ftp ...

  10. 使用python递归子目录处理日志文件

    重要说明: (1)python使用4个空格进行层次缩进的(不是tab),在eclipse里面可以直接使用tab缩进,是因为eclipse会实时地将tab转成4个空格 (2)在eclipse中安装pyD ...