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>

 

 

效果：

 

 

 


__EOF__

本文作者：语 默
本文链接：https://www.cnblogs.com/weijie0717/p/13215090.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   语~默  阅读(501)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· Qt个人项目总结 —— MySQL数据库查询与断言
点击右上角即可分享
微信分享提示