Skip to content

Instantly share code, notes, and snippets.

@izzi-ink

izzi-ink/index.html

Created May 15, 2020 16:34
Show Gist options
  • Save izzi-ink/811cc89d9891a06bf7a8a3389e9ed265 to your computer and use it in GitHub Desktop.
Save izzi-ink/811cc89d9891a06bf7a8a3389e9ed265 to your computer and use it in GitHub Desktop.
Download ZIP
Toggling Passwords in Multiple Forms
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Toggle Passwords in Multiple Forms</title>
</head>
<body>
<h1>Toggle Passwords in 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">
</div>
<div>
<label for="show-password">
<input type="checkbox" name="show-passwords" id="show-password" data-pw-toggle="#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">
</div>
<div>
<label for="new-password">New Password</label>
<input type="password" name="new-password" id="new-password">
</div>
<div>
<label for="show-passwords">
<input type="checkbox" name="show-passwords" id="show-passwords" data-pw-toggle="#current-password", "#new-password">
Show passwords
</label>
</div>
<p>
<button type="submit">Change Passwords</button>
</p>
</form>
</body>
</html>
Raw
script.js
/** Element.matches() polyfill
** https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
*/
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
// Get the elements, convert nodelist to array
var pwd = document.querySelector('#password');
var pwords = Array.prototype.slice.call(document.querySelectorAll('input[type="password"]') );
// Listen for events document-wide
document.addEventListener('click', function(event) {
// Does the clicked element have
// the [data-pw-toggle] attribute?
// If not, stop.
if (!event.target.matches('[data-pw-toggle]')) return;
// Get elements and convert
// nodelist to an array
var pwords = Array.prototype.slice.call(document.querySelectorAll(event.target.getAttribute('data-pw-toggle')));
// Loop through password fields
pwords.forEach(function (pw) {
if (event.target.checked) {
pw.type = 'text';
} else {
pw.type= 'password';
}
})
}, false );
Raw
style.css
body {
background-color: #582A71;
color: white;
font-family: Arial, sans-serif;
margin: 2em auto;
max-width: 40em;
width: 88%;
}
label {
display: block;
padding-bottom: 3px;
width: 100%;
}
input {
font-size: 15px;
margin-bottom: 1em;
padding: 4px;
}
[type="checkbox"] {
margin-bottom: 0;
margin-right: 0.25em;
}
button {
background-color: #7B9E35;
border: 0;
color: white;
cursor: pointer;
font-size: 15px;
padding: 10px 12px;
text-shadow: 1px 1px 2px #333;
text-transform: uppercase;
}
button:hover {
background-color: #557714;
}
Raw
toggling-passwords-in-multiple-forms.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment