Show And Hide Password Using JavaScript
Last Updated :
24 Jan, 2025
When creating login or registration forms, a common feature is the ability to show and hide passwords. This improves user experience by allowing users to verify their input before submitting the form.
What We're Going to Create
We will create a "Password Hide and Show" feature that will allow users to toggle the visibility of their password. It will include an input field for the password and a button or icon (like an eye) to show or hide the text. Using HTML for structure, CSS for styling, and JavaScript for functionality, clicking the button will toggle the input field’s type between "password" (hidden) and "text" (visible), enhancing user experience and security.
Project Preview
Show and hide password using JavaScriptShow and Hide Password - HTML code
The "Show and Hide Password" feature allows users to toggle the visibility of their password input field with a button, enhancing usability and security in web forms.
HTML
<html>
<head></head>
<body>
<div class="container">
<label for="passes">Enter Password</label>
<div class="input-container">
<input id="passes" placeholder="Your password" type="password" />
<span class="eye-icon" id="eye-icon"> 👁️ </span>
</div>
</div>
</body>
</html>
In this example
- The div with class container organizes the label and input field for the password.
- The label is linked to the password input field using the for attribute and prompts the user to enter a password.
- The input field with type="password" accepts the user's password and shows placeholder text when empty.
- The span with class eye-icon and an eye emoji (👁️) is intended to toggle the visibility of the password.
Show and Hide Password - CSS Styling
The CSS styling for the "Show and Hide Password" feature ensures a clean, user-friendly interface by styling the input field, button, and positioning the eye icon. It uses flexbox for alignment and adds padding, borders, and rounded corners for a polished look.
CSS
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
.input-container {
display: flex;
align-items: center;
position: relative;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.eye-icon {
position: absolute;
right: 10px;
cursor: pointer;
font-size: 20px;
color: #333;
}
label {
font-size: 18px;
margin-bottom: 10px;
display: block;
}
In this example:
- Container Styling: Adds a white background, rounded corners, padding, and shadow for modern look.
- Input Field: Stretches to fit the container width, includes padding, a light gray border, and rounded corners for usability and style.
- Eye Icon: Positioned on the right of the input field, with a pointer cursor and dark gray color for clear interactivity.
- Label Styling: Features larger text, proper spacing, and a block layout for alignment and readability.
- Input-Icon Layout: Uses flexbox for horizontal alignment and relative positioning for precise placement.
Show and Hide Password - JavaScript
The JavaScript functionality for the "Show and Hide Password" feature toggles the input field's type between "password" and "text" when the button is clicked, updating the button text accordingly. It ensures that the password visibility can be switched with each click, providing interactive user experience.
JavaScript
let input = document.getElementById("passes");
let btn = document.getElementById("btnss");
btn.addEventListener("click", function() {
if (input.type === "password") {
input.type = "text";
btn.textContent = "Hide";
}
else {
input.type = "password";
btn.textContent = "Show";
}
})
In this example
- Variable Declarations: Selects the password input field (passes) and the button element (btnss) for manipulation and interactivity.
- Event Listener: Adds a click event to the button that toggles password visibility.
- Toggle Functionality: Checks the input field's type and toggles between "password" and "text", updating the button text to "Show" or "Hide" accordingly.
- Button Text Change: Updates the button text to "Hide" when password is visible and "Show" when hidden.
- Password Security: Keeps the password hidden by default and only reveals it when the button is clicked.
Complete code
HTML
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
.input-container {
display: flex;
align-items: center;
position: relative;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.eye-icon {
position: absolute;
right: 10px;
cursor: pointer;
font-size: 20px;
color: #333;
}
label {
font-size: 18px;
margin-bottom: 10px;
display: block;
}
</style>
</head>
<body>
<div class="container">
<label for="passes">
Enter Password
</label>
<div class="input-container">
<input id="passes" placeholder="Your password" type="password" />
<span class="eye-icon" id="eye-icon"> 👁️ </span>
</div>
</div>
<script>
let input = document.getElementById('passes');
let eyeIcon = document.getElementById('eye-icon');
eyeIcon.addEventListener('click', function () {
if (input.type === 'password') {
input.type = 'text';
eyeIcon.textContent = '🙉';
} else {
input.type = 'password';
eyeIcon.textContent = '👁️';
}
})
</script>
</body>
</html>
Similar Reads
Validate a password using HTML and JavaScript Validating a password using HTML and JavaScript involves ensuring that user-entered passwords meet certain criteria, such as length, complexity, or character types (e.g., uppercase, lowercase, numbers, and symbols). This process enhances security by enforcing strong password requirements before form
2 min read
Show And Hide Password Using TypeScript Managing password visibility in web applications enhances user experience by allowing users to toggle between hidden and visible passwords. TypeScript provides strong type safety and better maintainability for implementing this feature.What We Are Going to CreateWe’ll build an application that allow
4 min read
How to Generate a Random Password using JavaScript? Creating a random password generator is an excellent beginner-friendly project that can be useful in real-world applications. Passwords are vital for securing accounts, and strong, randomized passwords enhance security significantly. How to Generate a Random Password using JavaScriptWhat We're Going
5 min read
How to validate confirm password using JavaScript ? In almost every modern website we have seen a login and signup feature, which is surely an important service for both the client and the service provider. When a user signs up for a certain website they have to put in a username a password, to enter the password websites ask them to enter a password
3 min read
Password Matching using JavaScript In an online application form or social media signup page, it's common to have two input fields: one for the password and another for confirming the password. The goal is to check whether the entered passwords match.To achieve this, the first password is stored in a variable password1, and the confi
2 min read