How to show and hide password input in JavaScript?

1. Add a button beside password input

   There are many different designs for implementing a show and hide password input, such as using a button with text, a button with an eye icon, or a checkbox input.

   In this tutorial, we will be using a button to show and hide a password. First, we will use a button with text, and later, we will put an image in that button.

   Make sure to set an id and class because we will use this button in JavaScript as well as CSS. In addition, you should also put type="button" in the button to not be confused with a submit button on the form by the browser.

   <div>
     <label for="password">Password</label>
     <input type="password" id="password" name="password">
     <button class="show-hide-button" id="show-hide-button" type="button">Show</button>
   </div>
   

2. Put the button inside the input password.

   To put the button inside the input password, just set margin-left to a certain negative value.

   In addition, remove the background and border of the button to make it really seem like it is inside the input password. After that, you can style the button however you like.

   .show-hide-button {
     margin-left: -50px;
     background: none;
     border: none;
     cursor:pointer;
     color: hsl(0, 0%, 50%);
   }
   

3. Toggle the input type with JavaScript

   To implement a show and hide password, we toggle the type attribute of the input element from password to text and vice versa. In addition, toggle the innerHTML of the button from Show to Hide and vice versa.

   //get the button that will show or hide the password
   let showHideButton = document.getElementById('show-hide-button');
   
   //add a click listener to the button
   showHideButton.addEventListener('click', function (e) {
     // get the input password element
     let passwordInput = document.getElementById('password');
     //check if input password element is masked or not
     if(passwordInput.type == 'password') {
       passwordInput.type = 'text';
       e.target.innerHTML = 'Hide';
     } else {
       passwordInput.type = 'password';
       e.target.innerHTML = 'Show';
     }
   });
   

4. Add an image to button

   To add an image to the button, insert it inside the button element.

   In addition, I have created my own eye-closed and eye-open icon for this tutorial. You can download it from the links, or you can use your own image.

   <button class="show-hide-button" id="show-hide-button" type="button">
     <img src="eye-closed.svg">
   </button>
   

   Adjust your CSS style for the button to make the image fit better. In my case, I changed the margin-left from -50px to -40px and added vertical-align: middle style to align the button to the input element.

   .show-hide-button {
     margin-left: -40px;
     background: none;
     border: none;
     cursor:pointer;
     vertical-align: middle;
   }
   

   In addition, set the image width to a certain value, since it will not show if the width is not set.

   .show-hide-button img {
     width: 25px;
   }
   

   Now modify your JavaScript; instead of toggling the innerHTML of the button, we will toggle the src attribute of the image from eye-closed to eye-open, and vice versa.

   //get the button that will show or hide the password
   let showHideButton = document.getElementById('show-hide-button');
   
   //add a click listener to the button
   showHideButton.addEventListener('click', function (e) {
     // get the input password element
     let passwordInput = document.getElementById('password');
     //check if input password element is masked or not
     if(passwordInput.type == 'password') {
       passwordInput.type = 'text';
       e.target.setAttribute('src', 'eye-open.svg');
     } else {
       passwordInput.type = 'password';
       e.target.setAttribute('src', 'eye-closed.svg');
     }
   });
   

Conclusion

In JavaScript, to implement a show and hide password input, we need to toggle the type attribute from password to text and vice versa.