浮雲雅築: [研究][JavaScript]切換顯示和隱藏密碼

2019年2月22日星期五

[研究][JavaScript]切換顯示和隱藏密碼

[研究][JavaScript]切換顯示和隱藏密碼

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

[研究][JavaScript]切換顯示和隱藏密碼
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

浮雲雅築

2019年2月22日星期五

[研究][JavaScript]切換顯示和隱藏密碼

沒有留言:

張貼留言

2019年2月22日 星期五

[研究][JavaScript]切換顯示和隱藏密碼

沒有留言:

張貼留言

2019年2月22日星期五