js控制密码的显示与隐藏实例

时间：2022-09-17 07:34:28

原理是建立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. crontab 命令

    1. crontab 可以在shell里面设置一些定时任务 格式 30 * * * * nohup sh /data/admin/adsprecise/sources/providers.sh mjo ...

  2. C&sol;C&plus;&plus;中堆与栈

    本文介绍C/C++中堆,栈及静态数据区.   五大内存分区 在C++中,内存分成5个区,他们分别是堆.栈.*存储区.全局/静态存储区和常量存储区.下面分别来介绍: 栈,就是那些由编译器在需要的时候分 ...

  3. 2434&colon; &lbrack;Noi2011&rsqb;阿狸的打字机

    ac自动机,bit,dfs序. 本文所有的stl都是因为自己懒得实现.   首先x在y里面出现,就意味y节点可以顺着fail回去. 反向建出一个fail数,然后搞出dfs序列.找出x对应的区间有多少个 ...

  4. Linux中加入用户、删除用户时新手可能遇到的问题

    Linux中加入用户.删除用户时新手可能遇到的问题  1.创建新用户后切换到新用户:No directory, logging in with HOME=/     加入用户     #sudo us ...

  5. uoj&num;179 线性规划

    这是一道模板题. 本题中你需要求解一个标准型线性规划: 有nn个实数变量x1,x2,⋯,xnx1,x2,⋯,xn和mm条约束,其中第ii条约束形如∑nj=1aijxj≤bi∑j=1naijxj≤bi. ...

  6. QTP入门——玩玩小飞机

    1.什么是QTP? 百度百科中对QTP是这么介绍的: ——”QTP是QuickTest Professional的简称,是一种自动化测试工具.使用QTP的目的是想用它来执行重复的自动化测试,主要是用于 ...

  7. DAG路径覆盖模型

    概述 路径覆盖模型的特点是DAG中每个点经过且只经过一次,且一条路径覆盖路径上的所有点. 将每个点拆为\(x\)和\(x'\),暂不考虑其实际意义.然后连边\(S\rightarrow x\),\(x ...

  8. 『Python CoolBook』数据结构和算法&lowbar;字典比较&amp&semi;字典和集合

    一.字典元素排序 dict.keys(),dict.values(),dict.items() 结合max.min.sorted.zip进行排序是个很好的办法,另外注意不使用zip时,字典的lambd ...

  9. Kafka 笔记1

    Kafka 是对日志文件进行 append 操作,因此磁盘检索的开支是较小的:同时 为了减少磁盘写入的次数,broker 会将消息暂时 buffer 起来,当消息的个数(或大小)达到一定阀值时,再 f ...

  10. CentOS6&period;5下实现R绘图

    1.首先安装R的绘图包Cairo 下载地址:http://www.rforge.net/Cairo/files/ [root@Hadoop-NN-01 mysofts]# R CMD INSTALL ...

相关文章