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">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.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>

</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

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

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 :

839 Views