Hide Password HTML (Hide and Show Password using Javascript)

Published October 11, 2022

In any web application registration/login form contains password field which will be used to enter user password for the account creation. To make show and hide password feature will be most user friendly for the application. In this article we will cover on how to hide and show password using html, css and Javascript.

Pre requisites for this example:

  • Basic HTML Knowledge
  • Basic Css Knowledge
  • Basic Javascript Knowledge

 

In this example we are using three types files

Html, Css and Javascript

  • Html will be used to create basic UI elements. Here we are just adding an Input field with lock and eye icons
  • CSS will be used to make some styles for the page
  • Javascript file will be used to handle the hide and show the password text when tap on eye icon

 

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!--=============== BOXICONS ===============-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

        <!--=============== CSS ===============-->
        <link rel="stylesheet" href="./style.css">

        <title>Input password show hidden - Bedimcode</title>
    </head>
    <body>
        <div class="input">
            <div class="input__overlay" id="input-overlay"></div>

            <i class='bx bx-lock-alt input__lock'></i>
            <input type="password" placeholder="Password..." class="input__password" id="input-pass">
            <i class='bx bx-hide input__icon' id="input-icon"></i>
        </div>

   </body>
</html>

 

style.css

/*=============== INPUT PASSWORD ===============*/
 {
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: #D2D2D2;
}

.input {
  position: relative;
  background-color: #000000;
  padding: 1.35rem 1.25rem;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  column-gap: .75rem;
}

.input__lock, .input__icon {
  font-size: 1.25rem;
  z-index: 1;
}

.input__lock, .input__password {
  color: #FFFFFF;
}

.input__icon {
  color: #000000;
  cursor: pointer;
}

.input__password {
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  z-index: 1;
}

.input__password::placeholder {
  color: #FFFFFF;
}

.input__overlay {
  width: 32px;
  height: 32px;
  background:#FFFFFF;
  position: absolute;
  right: .9rem;
  border-radius: 50%;
  z-index: 0;
  transition: .4s ease-in-out;
}

/* Transition effect */
.overlay-content {
  width: 100%;
  height: 100%;
  border-radius: .5rem;
  right: 0;
}

.overlay-content ~ .input__lock {
  color: #000000;
}

.overlay-content ~ .input__password,
.overlay-content ~ .input__password::placeholder {
  color: #000000;
}

 

Javascript code

     

const showHiddenInput = (inputOverlay, inputPass, inputIcon) =>{
    const overlay = document.getElementById(inputOverlay),
          input = document.getElementById(inputPass),
          iconEye = document.getElementById(inputIcon)
          
    iconEye.addEventListener('click', () =>{
        // Change password to text
        if(input.type === 'password'){
            // Switch to text
            input.type = 'text'

            // Change icon
            iconEye.classList.add('bx-show')
        }else{
            // Change to password
            input.type = 'password'

            // Remove icon
            iconEye.classList.remove('bx-show')
        }

        // Toggle the overlay
         overlay.classList.toggle('overlay-content')
    })
}

showHiddenInput('input-overlay','input-pass','input-icon')

 

 

Once we are done the above file let open the file on your browser. You will see the below output

hide password html css javascript

 

Type some password and click on eye icon, it will show the password

how do i hide password html javascript

 

Keywords:

hide password html form

hide password html view source

show hide password eye icon html

how to hide password in html source code

html input password hide value

how to hide password in html table

html password hide and show

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

337 Views