Created
October 15, 2022 00:09
-
-
Save angusgrant/a13ef50b2b8505e40e29a1b07d095d1e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Password Visibility - Multiple Forms</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style type="text/css"> | |
body { | |
margin: 0 auto; | |
max-width: 40em; | |
width: 88%; | |
} | |
label { | |
display: block; | |
width: 100%; | |
} | |
input { | |
margin-bottom: 1em; | |
} | |
[type="checkbox"] { | |
margin-bottom: 0; | |
margin-right: 0.25em; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Password Visibility - Multiple Forms</h1> | |
<h2>Change Username</h2> | |
<p>Enter your username and password to change your username.</p> | |
<form> | |
<div> | |
<label for="username">Username</label> | |
<input type="text" name="username" id="username"> | |
</div> | |
<div> | |
<label for="password">Password</label> | |
<input type="password" name="password" id="password" class="js-pass"> | |
</div> | |
<div> | |
<label for="show-password"> | |
<input type="checkbox" name="show-password" id="show-password"> | |
Show password | |
</label> | |
</div> | |
<p> | |
<button type="submit">Change Username</button> | |
</p> | |
</form> | |
<h2>Change Password</h2> | |
<p>Enter your current password and new password below.</p> | |
<form> | |
<div> | |
<label for="current-password">Current Password</label> | |
<input type="password" name="current-password" id="current-password" class="js-pass"> | |
</div> | |
<div> | |
<label for="new-password">New Password</label> | |
<input type="password" name="new-password" id="new-password" class="js-pass"> | |
</div> | |
<div> | |
<label for="show-passwords"> | |
<input type="checkbox" name="show-passwords" id="show-passwords" > | |
Show passwords | |
</label> | |
</div> | |
<p> | |
<button type="submit">Change Passwords</button> | |
</p> | |
</form> | |
<script> | |
document.addEventListener('click', function (event) { | |
//check if either password checkbox is the one clicked | |
if (event.target.matches('#show-password') || event.target.matches('#show-passwords')) { | |
//traverse dom to get password Inputs in the clicked form | |
let passwordFields = event.target.closest('form').querySelectorAll('.js-pass'); | |
//loop through node list to set type (this is not as easy as jQuery :-() | |
for (let passwordField of passwordFields){ | |
passwordField.type = (event.target.checked ? 'text' : 'password') | |
} | |
} | |
}, false); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment