In modern web forms, providing users with the ability to toggle password visibility adds convenience and user-friendliness. Implementing an eye icon that allows users to show or hide their passwords enhances control and security while maintaining ease of use. Let’s explore how to achieve this functionality using JavaScript and an eye icon.

HTML Structure

Start by creating an input field for the password and an eye icon that toggles the password visibility.

<input type="password" id="passwordField">
<i class="fas fa-eye" id="togglePassword"></i>

JavaScript Implementation

1. Select Elements

Select the password input field and the eye icon using JavaScript.

const passwordField = document.getElementById('passwordField');
const togglePassword = document.getElementById('togglePassword');

2. Toggle Password Visibility

Create a function to toggle the password visibility when the eye icon is clicked.

togglePassword.addEventListener('click', function() {
    const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
    passwordField.setAttribute('type', type);
    // Change eye icon appearance based on password visibility
    togglePassword.classList.toggle('fa-eye-slash');
});

Styling and Icon Library

Ensure you have an icon library like Font Awesome linked in your HTML to use eye icons. Adjust the styling to show and hide the eye icon based on password visibility.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

/* Initially hide eye icon */
#togglePassword {
    display: none;
}

/* Show eye icon when password field is focused */
#passwordField:focus + #togglePassword {
    display: block;
}

Conclusion

Integrating the eye icon functionality to show and hide passwords enhances user experience and security in web forms. By implementing this feature using JavaScript, developers can provide users with the flexibility to view or mask their passwords conveniently.

You Might Also Like