How to Add a Hide or Show Password Feature in jQuery
In web development, the security of user information is paramount, especially when it comes to sensitive data such as passwords.
HTML forms provide a default behavior of obscuring the entered text with asterisks or dots in password input fields. This is done to add an extra layer of caution to protect users from prying eyes and potential security threats. It ensures that even in shared or public spaces, the likelihood of passwords being compromised is minimized.
The feature is implemented by using 'password' as the value for the 'type' attribute:
<input type="password" id="password">
However, you most probably have come across many websites and applications where the password field in the login forms has an option to 'show password' and 'hide password'. This usually involves adding a checkbox or eye icon, allowing users to toggle between obscured and visible password text.
Why Reveal Passwords?
While the default masking of password fields is a crucial security measure, there are situations where providing users with the option to reveal or hide their passwords enhances the overall user experience.
- User Convenience: Revealing the password can be convenient for users who want to verify their input or ensure they haven't made any typos. This also facilitates easier correction of mistakes without having to erase the entire input.
- Accessibility Considerations: For users with accessibility needs, having the option to show the password text can be beneficial. Some users may rely on screen readers, and allowing them to hear their input can improve the overall accessibility of the form.
Designing a Form with a Show/Hide Password Feature
To implement the Hide or Show Password feature in jQuery, we will add a checkbox box below the password input field to toggle options ON and OFF.
HTML Structure:
<div class="container">
<input type="password" id="password">
<input type="checkbox" id="toggle-password"> Show password
</div>
CSS Styling:
.container {
width: 30%;
margin: 20px auto;
}
#password {
width: 100%;
height: 35px;
font-size: 16px;
padding: 3px;
margin-bottom: 10px;
}
Output :
Implementing Show/Hide Functionality with jQuery
To toggle the visibility of the password, we use jQuery to detect when the checkbox field is checked or unchecked.
jQuery Script:
$('#toggle-password').change(function(){
if(this.checked) {
$("#password").attr("type", "text");
}
else {
$("#password").attr("type", "password");
}
});
In this example, when loaded, the HTML input field for the password has the type 'password' by default meaning the text entered will be masked. Using jQuery, we target the checkbox using its ID ('toggle-password') to detect when its value is changed using the .change() method.
Then we use the checked property together with an if statement to find out if it's checked or not.
If it's checked, we change its 'type' attribute value to 'text' or else change its type attribute value to 'password' using the .attr() method.
This in turn shows or hides the password depending on whether the checkbox is checked or not.
Here is the output :
Full Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hide or Show Password</title>
<style type="text/css">
.container {
width: 30%;
margin: 30px auto;
}
#password {
width: 100%;
height: 35px;
font-size: 16px;
padding: 3px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<input type="password" id="password">
<input type="checkbox" id="toggle-password"> Show password
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#toggle-password').change(function(){
if(this.checked) {
$("#password").attr("type", "text");
}
else {
$("#password").attr("type", "password");
}
});
});
</script>
</body>
</html>
Conclusion
Incorporating a Hide or Show Password feature using jQuery not only enhances user experience but also maintains the essential security measures required for password input fields.
Striking a balance between security and user convenience is key to creating a seamless and trustworthy environment for users interacting with password-protected forms on the web.
