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. 低差异序列 (low-discrepancy sequences)之Halton序列均匀产生多维随机数的介绍与实现

    Halton序列 在统计学中,Halton序列是用于生成空间中的点的序列,如Monte Carlo模拟的数值方法,虽然这些序列是确定性的,但它们的差异性很低,也就是说,在许多方面看起来是随机的.它们在 ...

  2. postman 插件安装

    本文只是基于 Chrome 浏览器的扩展插件来进行的安装,并非单独应用程序. 首先,你要台电脑,其次,安装有 Chrome 浏览器,那你接着往下看吧. 1. 官网安装(别看) 打开官网,https:/ ...

  3. 『Python』优雅的记录日志——loguru

    1. 安装 pip install loguru 2. 初识 from loguru import logger logger.debug("This is a debug..." ...

  4. 对OOP的理解

    OOP是面向对象编程Object Oriented Programming,特征分别是封装.继承.多态.抽象. 封装:封装是指将对象信息状态通过访问权限修饰符隐藏在对象内部,不允许外部程序直接访问,如 ...

  5. Java-基础-JDK动态代理

    1. 简介 代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问.在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 比如:我们在调用 ...

  6. YbtOJ#652-集合比较【Treap】

    正题 题目链接:http://www.ybtoj.com.cn/problem/652 题目大意 定义一个元素为一个有序集合包含两个元素\(C=\{A,B\}\) 集合\(C=\{A,B\}\)的大小 ...

  7. ASP.NET Core中将Json字符串转换为JsonResult

    ASP.NET Core中返回JsonResult 最近在使用NET 5.0做WebApi中,发现只能返回string类型,不能用JsonResult返回实体,于是查阅资料找到解决办法. 两种方式分别 ...

  8. RabbitMQ 3.9.7 镜像模式集群的搭建

    1. 概述 老话说的好:做人脚踏实地,一步一个脚印,便定能战胜一切困难,最终取得成功!!! 言归正传,之前我们聊了 RabbitMQ 单点服务的安装,今天我们来聊聊 RabbitMQ 3.9.7 镜像 ...

  9. asp.net core 中配合响应 html5 的音视频播放流，以及文件下载

    一.asp.net core 中配合响应 html5 的音视频播放流,以及文件下载 问题描述: 目前测试了在 Windows(谷歌浏览器).Android(系统浏览器.QQ.微信).iOS 三个系统不 ...

  10. Dapr + .NET Core实战（十四）虚拟机集群部署 mDNS + Consul

    前面我们说了在单机模式下和K8S集群下的Dapr实战,这次我们来看看如何在不使用K8S的情况下,在一个传统的虚拟机集群里来部署Dapr. 1.环境准备 我们准备两台centos7虚拟机 Dapr1:1 ...