Rohit Sharma

Posted on Apr 29, 2022

Password show/hide button using vanilla JS

#webdev #javascript #html #css

Hello Everyone, I'm back after a long time.
In this post we are going t create a simple password show/hide button using HTML,CSS and JS.
Incase you're not able to understand what we're going to create then check out this video

HTML:

We create an input field of type="password" to Enter the password in it and for creating eye icon we use font awesome.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<input type="password" placeholder="Enter Your Password" id="pass">
<button id="btn"><i id="icon"class="fa-solid fa-eye"></i></button>

CSS:

For styling, you are free to style the way you want.

JavaScript

We add an event listener to showbtn and onclick it call a function. For that we already set count= 1 and on click we increment count by 1
count += 1
Now we use if-else statement

if (count %2 == 0){

     icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");
  pass.removeAttribute("type");
  }else{
    icon.classList.remove("fa-eye-slash")
    icon.classList.add("fa-eye");
  pass.setAttribute("type","password");
  }

If count is divisible by 2 then we remove fa-eye class from icon and add fa-eye-slash class to it and remove the type attribute from pass to make the password visible.

Else (count is not divisible by 2 ) then we remove fa-eye-slash class from icon and add fa-eye class to it and add attribute of type password pass to hide the password.

The complete JS code is given below

let inpPassword = document.getElementById("pass");
let showbtn = document.getElementById("btn");
let icon = document.getElementById("icon");

let count = 1;
showbtn.addEventListener("click", function() {
  count += 1;

  if (count %2 == 0){

     icon.classList.remove("fa-eye");
    icon.classList.add("fa-eye-slash");


  pass.removeAttribute("type");
  }else{
    icon.classList.remove("fa-eye-slash")
    icon.classList.add("fa-eye");
  pass.setAttribute("type","password");
  }
});

As I'm writing this post after a long time, maybe this post is not up to that level. I'm sorry for that.

Hope you like this tutorial.

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (4)

Frank Wisniewski • Apr 29 '22 • Edited

what a hassle for such a small story...

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>Input Password</title>
  <style>
    input[type="password"]~span{
      user-select:none;
      cursor:pointer;
    }
   .opa{ opacity:0.5; }
  </style>
<label>Pass:
  <input type=password placeholder="Enter Your Password" /> 
  <span>👁</span> <!--UTF-8 (U+1F441) -->
</label>
  <script>
    "use strict";
    document.querySelector('input[type="password"]+span')
      .addEventListener('click', function(){
        let i = this.previousElementSibling
        i.type = i.type=='password' ? 'text': 'password'
        this.classList.toggle('opa')
    })
  </script>

JoelBonetR 🥇 • Apr 29 '22 • Edited

Even using font-awesome:

document.querySelector('input[type="password"]+i')
  .addEventListener('click', function() {
  let input = this.previousElementSibling;
  input.type = input.type == 'password' ? 'text' : 'password';
  this.className = this.className == 'fa fa-eye' ? 'fa fa-eye-slash' : 'fa fa-eye';
});

Rohit Sharma • Apr 30 '22

It looks more clean and now I get better understanding of it.
Thanks for it

Frank Wisniewski • Apr 30 '22 • Edited

toggle() overwrites the last assigned icon!

<!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>Input Password</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    label{
      position:relative;
    }
    input+i{
      user-select:none;
      cursor:pointer;
      position:absolute;
      right:3px;
      top:2px;
    }
  </style>
<label>Pass:
  <input type=password placeholder="Enter Your Password" /> 
  <i class="fa fa-eye"></i>
</label>
  <script>
    "use strict";
    document.querySelector('input[type="password"]+i')
      .addEventListener('click', function(){
      let i = this.previousElementSibling
      i.type = i.type=='password' ? 'text': 'password'
      this.classList.toggle('fa-eye-slash' )
    })
  </script>

DEV Community

Password show/hide button using vanilla JS

HTML:

CSS:

JavaScript

Build Your Own Forms without Manual Coding

Top comments (4)

The Next Generation Developer Platform

Read next

Hacking the Python Import System and Rewriting the AST For Durable Execution

What Can In-Browser JavaScript Do and What Are Its Limitations?

🧠 Free Code Challenges, UX Trends Shaping 2025 & Duolingo's Retention Playbook

Get Pending Transactions in Binance Smart Chain Mempool Using Ether.js and QuickNode

Instrument, monitor, fix: a hands-on debugging session