jquery 实现 <imput>标签 密码框显示/隐藏密码功能
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>标签 密码框显示/隐藏密码功能的更多相关文章
- jquery实现密码框显示提示文字
jquery实现密码框提示文字的功能. 代码: <html> <head> 3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...
- JS组件系列——显示隐藏密码切换的jQuery插件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- 【Android初级】教你用两行代码实现“显示/隐藏密码”的效果
Android里面要使用密码的场景是非常多的,支付宝.微信.淘宝以及各大银行APP,都跟用户的密码有关.用户的密码是极为隐私的,用户在输入时不希望密码被别人看到,所以几乎所有需要输入密码的场景下都会把 ...
- input 显示/隐藏密码
js代码: // 显示/隐藏密码 $('.open').on('click',function(){ if($("#psw").prop('type')=='password'){ ...
- uitextfield 设置为密码框显示
uitextfield 设置为密码框显示: 在xib中,将文本secure的复选框选中即可.
- WordPress登录框显示/隐藏输入的密码
直接让用户自行根据需要选择是全部隐藏输入的密码,还是全部显示输入的密码. 在全部显示密码框的内容时,用户输错的可能性就大大降低,这也是微软推荐的一种密码框处理方式.效果如下: 今天,我将给大家介绍,在 ...
- vue+element-ui实现显示隐藏密码
<template> <el-form :model="cuser_info" label-width="115px" label-posit ...
- JQuery实现多个菜单的显示隐藏
(如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 点击各个菜单显示/隐藏,以及点击灰色部分隐藏. 比如点击了第一个菜单,然后点击第二个菜单,第一个菜单会隐藏,再显示第二个菜单,不会叠加. ...
- jquery 点击页面其他地方实现隐藏菜单功能
1.给页面文档添加一个点击事件函数,在函数内实现隐藏菜单功能. $('html').click(function(){//Hide the menus if visible});//用$(docume ...
随机推荐
- .NET 中的HTTP 3支持
dotnet团队官方博客发布了一篇HTTP3的文章:HTTP/3 support in .NET 6.文章介绍了.NET 6 将预览支持HTTP3,.NET 7正式支持HTTP3,原因主要是HTTP/ ...
- Cookie和Session的介绍与认识
Cookie: cookie是一种客户端的状态管理技术. 当浏览器向服务器发送请求的时候,服务器会将少量的数据以set-cookie消息头的方式发送给浏览器,当浏览器再次访问服务器时,会将这些数据以c ...
- 建立 F103C8T6 HAL库 Makefile FreeRTOS 工程
F103C8T6 HAL库 Makefile FreeRTOS 工程模板 环境 该工程的开发平台为 ARM-GCC 工具链和 Make > arm-none-eabi-gcc -v gcc ve ...
- ❤️【Android精进之路-03】创建第一个Android应用程序竟然如此简单❤️
您好,我是码农飞哥,感谢您阅读本文,欢迎一键三连哦. 本文会重点介绍如何创建第一个Android应用,以及如何使用Android Studio进行调试 干货满满,建议收藏,需要用到时常看看.小伙伴们如 ...
- Charles抓包工具过滤网络请求
Charles是一个HTTP代理服务器,HTTP监视器,反转代理服务器,当浏览器连接Charles的代理访问互联网时,Charles可以监控浏览器发送和接收的所有数据.它允许一个开发者查看所有连接互联 ...
- MySQL修改root密码的多种方法, mysql 导出数据库(包含视图)
方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass ...
- NOI.AC#2139-选择【斜率优化dp,树状数组】
正题 题目链接:http://noi.ac/problem/2139 题目大意 给出\(n\)个数字的序列\(a_i\).然后选出一个不降子序列最大化子序列的\(a_i\)和减去没有任何一个数被选中的 ...
- IDEA快捷键(未使用)
1.ctrl Ctrl + Y 删除光标所在行 或 删除选中的行 Ctrl + W 递进式选择代码块.可选中光标所在的单词或段落,连续按会在原有选中的基础上再扩展选中范围 Ctrl + E 显示最近打 ...
- 03-Jwt在.netcore中的实现
1)jwt的加密解密过程 jwt验证的核心就是加密解密的过程,掌握了这个过程,也就掌握了jwt的原理.jwt的三部分中,header和payload是明文的,能够直接读出来,签名Signature部分 ...
- 11.3 LVS
LVS是什么 LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件项目,它的官方站点是www.linuxvirtualserver.o ...