#AD Top Online Web Development & Programming Courses | Udemy

Toggle password visibility using JavaScript

Last modified February 28th 2022 | #js | GitHub Source Code [GitHub]

Toggling the visibility of a password allows a user to check if they’re entering a password correctly. It helps prevent the frustration you get when you think you’ve entered a password correctly only to find out you haven’t. In this tutorial we’ll show you how this functionality can be implemented using JavaScript.

Show password checkbox

First thing we need is a HTML form with a password input field field and checkbox:

<form id="login"> <div> <input type="password" id="password" name="password" /> <input type="checkbox" id="toggle-password" /> <label for="toggle-password">Show Password</label> </div> </form>
Code language: HTML, XML (xml)

Now for the JavaScript.

First let’s define a couple of variables for the password field and checkbox:

const password = document.getElementById("password"); const togglePassword = document.getElementById("toggle-password");
Code language: JavaScript (javascript)

Next add a click event listener that will call a toggleClicked() function when the checkbox is clicked:

togglePassword.addEventListener("click", toggleClicked);
Code language: JavaScript (javascript)

toggleClicked() determines if the toggle-password checkbox has the “checked” attribute and changes the field type accordingly. This works as plain text input fields don’t obscure the characters making them visible to the user:

function toggleClicked() { if (this.checked) { password.type = "text"; } else { password.type = "password"; } }
Code language: JavaScript (javascript)

We can take this a step further by adding an “eye” icon to indicate the toggle state of the password. Add the following to the toggleClicked() function to toggle a “visible” CSS class on the password field:

function toggleClicked() { password.classList.toggle("visible"); if (this.checked) { password.type = "text"; } else { password.type = "password"; } }
Code language: JavaScript (javascript)

Next well add a “visible” icon to the password field and an “invisible” icon when the .visible class is activated with the following CSS:

#password { background-image: url("https://img.icons8.com/material-sharp/20/000000/visible.png"); background-position: 97% center; background-repeat: no-repeat; } #password.visible { background-image: url("https://img.icons8.com/material-outlined/20/000000/invisible.png"); }
Code language: CSS (css)

Finally we’ll hide the HTML checkbox element and position it’s label over the icon so when it’s clicked the visibility is toggled:

#toggle-password { display: none; } #toggle-password + label { text-indent: -9999px; display: inline-block; width: 20px; height: 20px; margin-left: -32px; cursor: pointer; }
Code language: CSS (css)

That all for this tutorial. You’ve just learn’t how to create a fully functioning “show password” form input field thanks to some basic JavaScript and CSS. As with all tutorials on w3collective you can find the working source code on GitHub.

Related Posts

#AD Shop Web Developer T-Shirts