How to do password input with password display eye

In this article we are going to learn how to create a feature that is hot on many websites these days: password input with password display eye.

password input with password display eye cover

Hey you programmer, okay? Let’s learn something new?

First let’s comment on the technique itself

Basically in registration and login forms, we have a field for the password

This field contains the input type of password, which masks characters to give user security

A practice that has been used since the dawn of the web

But now web sites are asking for increasingly strong passwords and they want to avoid premature password recovery

This function was developed to show the password that the user is typing

And this is done with a little JavaScript touch, manipulating the field’s type and setting it to text

Then the input works the same way, but displaying the text, which is the password, which is being typed in it. Isn’t that cool?

In practice:

Now let’s do this in practice, see this HTML sample code:

<!DOCTYPE html>
<html>
 <head>
  <title>Como fazer input de password com olho de mostrar senha</title>
  <!-- icons library -->
  <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
 </head>
 <body>
  <h2>Faça o login</h2>
  <form>
   <div>
    <input type="email" name="email" placeholder="Digite seu e-mail">
   </div>
   <div>
    <input type="password" name="password" placeholder="Digite sua senha">
    <span class="lnr lnr-eye"></span>
   </div>
   <div>
    <input type="submit" value="Entrar">
   </div>
  </form>
 </body>
</html>

Here we create a basic project, simulating a login screen

And also an icon source called Linear Icons to use their eye icon

Let’s add some CSS, so the screen looks prettier and the eye goes into the input, which is how this feature is positioned.

See the added code:

body {
 font-family: Helvetica;
}

div {
 position: relative;
 width: 200px;
}

input {
 border-radius: 0;
 padding: 5px;
 margin-bottom: 10px;
 width: 100%;
 box-sizing: border-box;
}

.lnr-eye {
 position: absolute;
 top: 5px;
 right: 10px;
 cursor: pointer;
}

And then the following return is displayed in the browser:

password input with password display eye example 1

Now let’s move on to the part of JavaScript, which will actually execute the functionality.

let btn = document.querySelector('.lnr-eye');

btn.addEventListener('click', function() {
 let input = document.querySelector('#password');
 if(input.getAttribute('type') == 'password') {
  input.setAttribute('type', 'text');
 } else {
  input.setAttribute('type', 'password');
 }
});

And this is the only code we need!

First we identify the icon and put it to a variable, then we insert a click event into it via addEventListener

And when it is clicked we identify the password input and also add it to a variable

In the if conditional we check the attribute of this input, if it is as password we transform it to text and vice versa

This will make the event undone

See the return: