Password Reveal

[jPaulB]

Hi Everybody,

I've seen some password input boxes that look like this:

How could I make my password inputs behave the same way?

 

[VBService]

Have you tried something like this?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<style>
  .password-container {
    position: relative;
    display: inline-block;
  }

  .password-container input {
    padding-right: 1.6rem;
  }

  .toggle-password {
    position: absolute;
    right: .35rem;
    top: 55%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1rem;
    color: gray;
  }
</style>

<div class="password-container">
  <input type="password" id="password" value="PaSsWoRd_ExAmPlE">
  <i class="fa-solid fa-eye toggle-password"></i>
</div>

<script>
  document.querySelector('.toggle-password')
    .addEventListener('click', function () {
    const password_input = document.querySelector('#password');
    const icon = this;

    if (password_input.type === 'password') {
      password_input.type = 'text';
      icon.classList.remove('fa-eye');
      icon.classList.add('fa-eye-slash');
    } else {
      password_input.type = 'password';
      icon.classList.remove('fa-eye-slash');
      icon.classList.add('fa-eye');
    }
  });
</script>

 

[jPaulB]

WOW!