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. Java基础系列（8）- 数据类型

    数据类型 强类型语言 要求变量的使用合乎规定,所有的变量都必须先定义才能使用.Java是强类型语言. 弱类型语言 变量定义比较随意,比如"12"+3,可以是int型123,也可以是 ...

  2. Linux系列（17） - >、>>的用法

    适用场景 输出重定向,将命令结果写入文件当中 差异化 >:覆盖原文件内容 >>:追加文件内容 格式 [命令] > [文件名]:将[命令]的结果覆盖到[文件名]该文件中,如果目录 ...

  3. fibnacci数列

    斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为"兔子数列&qu ...

  4. 使用Jmeter过程中遇到的问题

    学习接口自动化测试框架或工具,UI自动化测试框架或工具,有时会觉得知识似乎比较零散,死记硬背不是一个好方法.一个学习的思路是思考使用这些框架或工具的时候,可能会遇到什么问题,遇到这些问题可以通过什么方 ...

  5. python 文件夹扫描

    扫描指定文件夹下的文件.或者匹配指定后缀和前缀的函数. 假设要扫描指定文件夹下的文件,包含子文件夹,调用scan_files("/export/home/test/") 假设要扫描 ...

  6. 『Python』matplotlib实现GUI效果

    1. 类RadioButtons的使用方法 类似单选框 import numpy as np import matplotlib.pyplot as plt import matplotlib as ...

  7. 使用Gitmoji进行git commit的快速查阅指南

    目录 前言 1. 查阅方法:脚本法 1.1 利用 VS Code 编辑多行文本快速写脚本文件 1.2 给脚本添加可执行权限 1.3 修改环境变量 PATH 使脚本在所有路径下都可以执行(全局执行) 2 ...

  8. 鸿蒙内核源码分析(内存规则篇) | 内存管理到底在管什么 | 百篇博客分析OpenHarmony源码 | v16.02

    百篇博客系列篇.本篇为: v16.xx 鸿蒙内核源码分析(内存规则篇) | 内存管理到底在管什么 | 51.c.h .o 内存管理相关篇为: v11.xx 鸿蒙内核源码分析(内存分配篇) | 内存有哪 ...

  9. 前端快闪三：多环境灵活配置react

    你已经使用Create React App脚手架搭建了React应用,现在该部署了. 一般会使用npm run build或者yarn build构建出静态资源, 由web服务器承载. 您会体验到 多 ...

  10. farOs 介绍

    nGame nGame 一款文字游戏服务端框架;用于快速构建:自由探索.武侠.修真.模拟,回合制,剧本杀.动态语言小说.等服务器 如果你有期望实现的功能请加Q群 ngame计划 完善框架功能 farO ...