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中针对区域语言标记信息的操作

    相信大家对 zh_CN 这个东西绝对不会陌生,不管是 PHP 中,还是在我们的网页上,都会见到它的身影.其实这就是指定我们的显示编码是什么国家或者地区的,使用何种语言.对于这种区域语言的标记来说,PH ...

  2. 一起学习PHP中断言函数的使用

    原来一直以为断言相关的函数是 PHPUnit 这些单元测试组件提供的,在阅读手册后才发现,这个 assert() 断言函数是 PHP 本身就自带的一个函数.也就是说,我们在代码中进行简单的测试的时候是 ...

  3. git tag标签

    列出标签 # 默认按字母排序显示 $ git tag # 模糊匹配查找标签 $ git tag -l "v2.8.5*" 创建标签 # 创建附注标签 $ git tag -a v1 ...

  4. centos linux服务器apache+mysql环境访问慢优化方法

    查找软件安装目录:find / -name 软件名称 一.优化apache配置增加MaxClients的值 默认情况下,2.0及以上apache版本MaxClients的值为256,对于中大型应用访问 ...

  5. ecshop商品批量上传之EC助理1.28支持ECshop2.7.3方法

    目前官方随着ECShop V2.73的发布也发布了相对应的EC助理1.30版.默认EC助理1.28也支持到ECShop V2.72,要想让EC助理1.28也支持到ECShop V2.73,那要了解EC ...

  6. python 正则表达式findall

    re.findall("匹配规则", "要匹配的字符串") 以列表形式返回匹配到的字符串 https://www.cnblogs.com/gufengchen/ ...

  7. P6329-[模板]点分树 | 震波

    正题 题目链接:https://www.luogu.com.cn/problem/P6329 解题思路 给出\(n\)个点的一棵树,每个点有权值,有\(m\)次操作 修改一个点\(x\)的权值为\(y ...

  8. truncate表时报“唯一/主键被启用的外部关键字引用”解决办法

    前言:清空表时提示"唯一/主键被启用的外部关键字引用"这一警告信息 原因:是因为主键被子表引用,所以对主键进行更改就好了 解决: 使用 alter table table_name ...

  9. 计算机网络-4-2-ARP地址解析协议以及IP数据报不可变组成部分

    地址解析协议ARP ​ 在实际的应用中,我们会经常遇见这样的一个问题:我们已知一个机器(主机或者路由器的),我们怎么获取相应的硬件地址?,地址解析协议就是用来解决这个问题的. ARP协议的作用: 由上 ...

  10. 感恩笔记之SQL查询功能最简使用模板

    感恩笔记之SQL查询功能最简使用模板 第一部分:SQL单表功能 1 语句主要关键字 SELECT --查询数据列 INTO --新建数据表 FROM --查询数据表 WHERE --筛选数据表结果 O ...