DEV Community

Rohit Sharma
Rohit Sharma

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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"); }
Enter fullscreen mode Exit fullscreen mode

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"); } });
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
frankwisniewski profile image
Frank Wisniewski • • 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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • • 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'; });
Enter fullscreen mode Exit fullscreen mode

Collapse
 
devrohit0 profile image
Rohit Sharma •

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

Collapse
 
frankwisniewski profile image
Frank Wisniewski • • 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>
Enter fullscreen mode Exit fullscreen mode