1 <!doctype html>

 2 <html>

 3     <head>

 4         <meta charset="utf-8">

 5         <title>密码框</title>

 6         <link rel="stylesheet" href="../css/bootstrap.min.css"/>                    <!-- 写入具体的bootstrap 和 font-awesome   路径 -->

 7         <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css"/>

 8     </head>

 9 <body>

10     <div class="content">

11         <div class="input_block">

12             <input type="password" id="password" placeholder="密码"/>

13             <i class="fa fa-eye" onclick="hideShowPsw({{ forloop.counter }})" id="eye"></i>     <!-- 如果使用For 循环生成多个相同功能代码可以传入for循环ID:{{ forloop.counter}}    -->

14         </div>

15     </div>

16     <script type="text/javascript">

17         //隐藏text block，显示password block

18         function hideShowPsw(id){

19             var eye = document.getElementById("eye"+id);

20             var password = document.getElementById("password"+id);

21             if (password.type == "password") {

22                 password.type = "text";

23                 eye.className='fa fa-eye-slash'

24             }else {

25                 password.type = "password";

26                 eye.className='fa fa-eye'

27                 }

28             }

29     </script>

30 </body>

31 </html>

 

效果：

jquery 实现 <imput>标签 密码框显示/隐藏密码功能的更多相关文章

  1. jquery实现密码框显示提示文字

    jquery实现密码框提示文字的功能. 代码:    <html>  <head>   3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...

  2. JS组件系列——显示隐藏密码切换的jQuery插件

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  3. 【Android初级】教你用两行代码实现“显示/隐藏密码”的效果

    Android里面要使用密码的场景是非常多的,支付宝.微信.淘宝以及各大银行APP,都跟用户的密码有关.用户的密码是极为隐私的,用户在输入时不希望密码被别人看到,所以几乎所有需要输入密码的场景下都会把 ...

  4. input 显示/隐藏密码

    js代码: // 显示/隐藏密码 $('.open').on('click',function(){ if($("#psw").prop('type')=='password'){ ...

  5. uitextfield 设置为密码框显示

    uitextfield 设置为密码框显示: 在xib中,将文本secure的复选框选中即可.

  6. WordPress登录框显示/隐藏输入的密码

    直接让用户自行根据需要选择是全部隐藏输入的密码,还是全部显示输入的密码. 在全部显示密码框的内容时,用户输错的可能性就大大降低,这也是微软推荐的一种密码框处理方式.效果如下: 今天,我将给大家介绍,在 ...

  7. vue+element-ui实现显示隐藏密码

    <template> <el-form :model="cuser_info" label-width="115px" label-posit ...

  8. JQuery实现多个菜单的显示隐藏

    (如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 点击各个菜单显示/隐藏,以及点击灰色部分隐藏. 比如点击了第一个菜单,然后点击第二个菜单,第一个菜单会隐藏,再显示第二个菜单,不会叠加. ...

  9. jquery 点击页面其他地方实现隐藏菜单功能

    1.给页面文档添加一个点击事件函数,在函数内实现隐藏菜单功能. $('html').click(function(){//Hide the menus if visible});//用$(docume ...

随机推荐

  1. 学习PHP中的iconv扩展相关函数

    想必 iconv 这个扩展的相关函数大家多少都接触过,做为 PHP 的默认扩展它已经存在了很久,也是我们在操作字符编码时经常会使用的函数.不过除了 iconv() 这个函数外,你还知道它的其它函数吗? ...

  2. php 设计模式 --适配器

    1,目标:实现一个不同的类不同方法,符合一定的规范: 规范类 <?php interface Iplay{ function Attack(); function Defence(); } cl ...

  3. contos 7修改root密码

    https://www.linuxidc.com/Linux/2018-01/150211.htm 下面是CentOS 7的root密码修改 开机按esc 选择CentOS Linux (3.10.0 ...

  4. Python3入门系列之-----字典

    字典 字典是一种可变容器模型,且存放任何类型对像(如:字符串,数字,或者列表甚至字典),每个字典有键名(key)和键值(value)且用冒号 :  隔开, 多个字典用逗号(,)隔开整个字典包括在花括号 ...

  5. AngularJS的简单实用

    Angular Js 的初步认识和使用    一:        1.模块化            定义模块和控制器  ng-app="myapp"  controller=&qu ...

  6. 1-SQL Server2019安装

    sql server2019安装 首先去官网下载(下载express版本): 打开安装程序 选择自定义 更改一下安装目录,点击安装 等待安装 等安装完成后,出现如下页面 选择SQL Server独立安 ...

  7. 巧用优先队列：重载运算符在STL优先队列中的应用

    前言 写优先队列优化dijkstra的时候,需要放进优先队列的常常有数值和编号两类,以下介绍让编号捆绑数值放入优先队列的几种方法. 由于过程比较简单,记住代码即可,下面不再讲解,只附上代码,请读者自行 ...

  8. HTML元素的三种类型及其转换

    HTML元素的三大类型 1.块元素 可以设置宽高大小,默认宽度为100%,并且独占一行. 例如:p ul li h1~h6 div form table 2.内联(行内)元素 无法设置宽高,元素大小随 ...

  9. 简单Tab切换

    延迟Tab切换,使用css中的flex布局,原生js实现.(京东首页菜单也有此延迟功能哦!) 每天进步一丢丢~~ 1.延迟Tab切换 <!DOCTYPE html> <html la ...

  10. oracle数据导入"HIST_GRAM_LIST_ITEM"问题处理

    1.问题显示 处理对象类型 SCHEMA_EXPORT/TABLE/CONSTRAINT/REF_CONSTRAINT ORA-39083: 对象类型 REF_CONSTRAINT 创建失败, 出现错 ...