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中的应用简介

    对于数学计算来说,最常见的其实还是我们使用各种操作符的操作,比如说 +加.-减 之类的.当然,PHP 中也为我们提供了一些可以方便地进行其他数学运算的操作函数.这些函数都属于 Math 扩展.这个扩展 ...

  2. python处理权限关系一些注意事项

    在模型类中多对多的关系(必须是对象) 如果要获取多对多表中的值,必须使用对象进行搜索,不能直接输入名称 例:这样才能查找到(下面例子是针对,组设置多对多关到用户,现在要根据用户获取相应的组) user ...

  3. CF960G-Bandit Blues【第一类斯特林数,分治,NTT】

    正题 题目链接:https://www.luogu.com.cn/problem/CF960G 题目大意 求有多少个长度为\(n\)的排列,使得有\(A\)个前缀最大值和\(B\)个后缀最大值. \( ...

  4. .Net Core利用反射动态加载类库的方法（解决类库不包含Nuget依赖包的问题）

    在.Net Framework时代,生成类库只需将类库项目编译好,然后拷贝到其他项目,即可引用或动态加载,相对来说,比较简单.但到了.Net Core时代,动态加载第三方类库,则稍微麻烦一些. 一.类 ...

  5. video 适配通屏展示、针对不同分辨率 禁止变形处理

    CSS object-fit 属性 object-fit: fill|contain|cover|scale-down|none|initial|inherit; 样式上 video{ height: ...

  6. 我在阿里巴巴做 Serverless 云开发平台

    技术的成熟度源自大规模的实践,Java 领域,阿里将自身的实践源源不断的反哺给微服务技术体系:Node.js 领域,阿里正掀起了前所未有的前端革命浪潮,将实践反哺给 Serverless技术体系,并逐 ...

  7. PostgreSQL 大小写问题 一键修改表名、字段名为小写

    标准的SQL是不区分大小写的.但是PostgreSQL对于数据库中对象的名字允许使用支持大小写区分的定义和引用方法.方式就是在DDL中用双引号把希望支持大小的对象名括起来.比如希望创建一个叫AAA的表 ...

  8. codeforces316E3 Summer Homework（线段树，斐波那契数列）

    题目大意 给定一个n个数的数列,m个操作,有三种操作: \(1\ x\ v\) 将\(a_x\)的值修改成v $2\ l\ r\ $ 求 \(\sum_{i=l}^r x_i*f_{i-l}\) 其中 ...

  9. 【高热FAQ】关于智慧康养物联网加速器 ，你想知道的都在这

    摘要:从软硬件解决方案.设备接入到资源扶持,一文梳理智慧康养物联网加速器中ISV最关心的问题. 本文分享自华为云社区<[高热FAQ]关于智慧康养物联网加速器 ,你想知道的都在这>,作者:技 ...

  10. Java（28）集合三Map

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15228436.html 博客主页:https://www.cnblogs.com/testero ...