2019-02-22
使用 CheckBox 切換顯示和隱藏密碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 密碼:<input type="password" id="pwd"> <input type="checkbox" onclick="ShowPwd()">顯示密碼 <script> function ShowPwd() { var x = document.getElementById("pwd"); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } } </script> </body> </html> |
(下圖)眼睛符號切換回來後好像不會再顯示
********************************************************************************
使用 HyperLink 切換顯示和隱藏密碼
</html> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="box"> <form name="forms" action="" method="post"> <label for="">帳號:</label> <input id="username" name="username" /></span><br /> <label for="">密碼:</label> <span class="box"><input id="pwd" type="password" name="pws" /></span> <span class="box" id="btn"><a href="javascript:showPwdFunc();">顯示密碼</a></span> </form> </div> <script> var ele = { pwd: document.getElementById('pwd'), btn: document.getElementById('btn'), showPwd: '<a href="javascript:showPwdFunc();">顯示密碼</a>', hidePwd: '<a href="javascript:hidePwdFunc();">隱藏密碼</a>' } function showPwdFunc() { if (ele.pwd.type === 'password') { ele.pwd.type = 'text'; ele.btn.innerHTML = ele.hidePwd; } } function hidePwdFunc() { if (ele.pwd.type === 'text') { ele.pwd.type = 'password'; ele.btn.innerHTML = ele.showPwd; } } </script> </body> </html> |
********************************************************************************
使用 Button 切換顯示和隱藏密碼
</html> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form name="forms" action="" method="post"> 帳號:<input id="username" name="username" /><br /> 密碼:<input id="pwd" type="password" name="pws" /> <input id="btn1" type="button" value="顯示密碼" /> </form> <script> window.onload = function () { var pwd = document.getElementById('pwd'); var btn = document.getElementById('btn1'); var showHide = true; btn.onclick = function () { if (showHide) { pwd.type = 'text'; showHide = false; btn.value = '隱藏密碼'; } else { pwd.type = 'password'; showHide = true; btn.value = '顯示密碼'; } } } </script> </body> </html> |
(完)
相關
[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html
https://shaurong.blogspot.com/2019/02/javascript.html
[研究][ASP.NET][JavaScript] hideShowPassword 與 Fortify SCA 白箱測試
https://shaurong.blogspot.com/2018/04/aspnetjavascript-hideshowpassword.html
[研究][ASP.NET][JavaScript]hideShowPassword v2.1.1元件安裝、試用
https://shaurong.blogspot.com/2017/11/aspnet-hideshowpassword.html