In this tutorial, we're going to have a quick look at how you can create a show password button on your register or login forms.
When you're creating a register form, it's best practice to have this form as small as possible, with one of the form fields used for passwords. There is a common trend when displaying a password field to display a confirm password field and make sure they match, this is to increase the chances of the user not entering the wrong password in the field from typos.
Another common trend instead of asking the user to confirm their password is to have a show/hide password button. The problem with a password field is the reason that it's used—to hide the text on the screen so you can type your password into a textbox without anyone being able to see your password as you type. If you make a typo with your password, you won't be able to tell. The show/hide password button—when clicked—will show the user what they've typed into the password, which is essentially changing the password field into a normal textbox.
Along with using this on your register form to help make sure users enter their password correctly, you can also add this button to your login form to prevent typos in a user's password similar to how the Mailchimp login page works.
Notice the checkbox next to the password field labelled "show". When you click this, it will display all of the contents of the password field by switching the password field to a normal textbox, so let's look at how this is done.
Create the Login Form
First, we need to create your basic login form.
<div class="container"> <form action="" id="loginForm"> <h2>Login</h2> <p><label for="username">Username</label><input type="text" name="username" id="username" placeholder="username" /></p> <p><label for="password">Password</label><input type="password" name="password" id="password" placeholder="password" /> <input type="button" id="showPassword" value="show" class="button" /></p> <p><input type="submit" value="Login" class="button" /></p> </form> </div>
The styling of the form isn't that important as we're demoing the show/hide button for the password field, so I won't show the CSS for the form... if you really want the styling, I'll attach a codepen to the form at the bottom of the page.
jQuery for the Show Hide Button
With the form on the page, we can create the jQuery necessary to switch the password field to a textbox.
First, we do the normal jQuery check to see that jQuery has loaded and it's ready to execute the code. Then we add a click event to the show password button, this button will be the same button for both showing and hiding the password. Inside the click event of the button we need to get the password field and store this in a variable, then get the current type of the password field.
Next, we need to check what the current password field type is, if it's a password field then we need to change the field to a text field by using the attr() method.
This will show the user's password to them on the page, so we will also need to change the show password button text from "Show" to "Hide". Because this is happening inside the show password button click event, we can use the keyword this to get the show password button.
Next, we can add the code to handle the event of hiding the password and changing the password field from a textbox to password. If the password field type is not a password, then we can assume it's a text box. Therefore, we need to change the type to a password field by using the attr() method again.
As we're now hiding the password, we need to change the text on the show password button back to Show.
Here's the full code used for the show/hide password button.
Below is the attached codepen used for this demo.