x32x01
  • by x32x01 ||
The "Hide/Show Password" feature enhances user experience by allowing individuals to toggle between obscured and visible passwords. This functionality aids in preventing typing errors while maintaining security. It’s especially useful on mobile devices, where users can confirm their input easily, striking a balance between convenience and safeguarding sensitive information.
HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<div class="pass">
  <label for="password">password</label>
  <input type="password" name="password" id="password" required>
  <i class="far fa-eye" id="togglePassword"></i>
</div>
CSS:
body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10% auto;
  font-size: 1.3rem;
}

.pass input {
  margin-top: 10px;
  width: 20rem;
  padding: 0.7rem;
  border-radius: 5px;
  box-shadow: 1px 1px 4px #00000040;
  border: none;
  font-size: 1.2rem;
  transition: all 0.3s ease-in-out;
}

.pass input:focus {
  outline: none;
  border: none;
  box-shadow: 1px 1px 4px #83c5be;
}

#togglePassword {
  margin-left: -35px;
  cursor: pointer;
  font-size: 1rem;
  color: #555;
}

#togglePassword:hover {
  color: #000;
}
JavaScript:
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');
 
togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye slash icon
    this.classList.toggle('fa-eye-slash');
});
 
Last edited:
Related Threads
x32x01
  • x32x01
Replies
0
Views
606
x32x01
x32x01
x32x01
Replies
0
Views
622
x32x01
x32x01
x32x01
Replies
0
Views
706
x32x01
x32x01
x32x01
Replies
0
Views
730
x32x01
x32x01
x32x01
  • x32x01
Replies
0
Views
618
x32x01
x32x01
Register & Login Faster
Forgot your password?
Forum Statistics
Threads
525
Messages
528
Members
54
Latest Member
Satti
Back
Top