jquery 实现 <imput>标签 密码框显示/隐藏密码功能
生活随笔
收集整理的這篇文章主要介紹了
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>标签 密码框显示/隐藏密码功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ubuntu 关机命令
- 下一篇： python可视化---阶梯图step(