In today's web applications, user experience and security are paramount. One small but significant...
In today's web applications, user experience and security are paramount. One small but significant feature that enhances both is the "show password" toggle in password input fields. While it might seem straightforward, implementing an advanced, secure, and accessible "show password" functionality requires careful consideration. In this post, we'll dive deep into creating an advanced "show password" feature using HTML, CSS, and JavaScript, tailored for professional web developers.
The "show password" feature allows users to toggle the visibility of their password input, reducing input errors and enhancing the user experience. However, a naive implementation can introduce security vulnerabilities and accessibility issues. As professional developers, it's crucial to implement this feature thoughtfully, balancing usability with security.
At its core, the "show password" functionality toggles the type
attribute of an <input>
element between password
and text
. A basic implementation might look like this:
<input type="password" id="password">
<button onclick="togglePassword()">Show Password</button>
<script>
function togglePassword() {
const passwordInput = document.getElementById('password');
const type = passwordInput.type === 'password' ? 'text' : 'password';
passwordInput.type = type;
}
</script>
While this works, it lacks finesse in terms of security, accessibility, and user experience.
To address these limitations, we'll design an advanced "show password" feature that includes:
We'll start by creating a semantic and accessible HTML structure.
<div class="password-field">
<input type="password" id="password" aria-describedby="togglePassword" autocomplete="current-password">
<button id="togglePassword" aria-label="Show password" aria-pressed="false">
<svg width="24" height="24" viewBox="0 0 24 24">
<!-- Eye icon SVG path -->
</svg>
</button>
</div>
Key Points:
aria-describedby
links the input to the toggle button.autocomplete="current-password"
helps browsers manage password autofill securely.Next, we'll style the components to create a polished look.
.password-field {
position: relative;
display: flex;
align-items: center;
}
.password-field input {
width: 100%;
padding-right: 2.5rem; /* Space for the toggle button */
}
.password-field button {
position: absolute;
right: 0.5rem;
background: none;
border: none;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
}
.password-field button svg {
fill: #6c757d;
transition: fill 0.2s ease;
}
.password-field button:hover svg {
fill: #495057;
}
Key Points:
Now, we'll add the JavaScript to handle the toggle functionality and enhance security.
const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('togglePassword');
let passwordVisible = false;
let visibilityTimeout;
togglePasswordButton.addEventListener('click', () => {
passwordVisible = !passwordVisible;
passwordInput.type = passwordVisible ? 'text' : 'password';
togglePasswordButton.setAttribute('aria-pressed', passwordVisible);
togglePasswordButton.setAttribute('aria-label', passwordVisible ? 'Hide password' : 'Show password');
// Change the icon (assuming we have two SVG paths)
const eyeIcon = passwordVisible ? eyeOpenIcon : eyeClosedIcon;
togglePasswordButton.innerHTML = eyeIcon;
// Security: Hide password after 5 seconds
if (passwordVisible) {
visibilityTimeout = setTimeout(() => {
passwordInput.type = 'password';
passwordVisible = false;
togglePasswordButton.setAttribute('aria-pressed', 'false');
togglePasswordButton.setAttribute('aria-label', 'Show password');
togglePasswordButton.innerHTML = eyeClosedIcon;
}, 5000);
} else {
clearTimeout(visibilityTimeout);
}
});
Key Points:
aria-pressed
and aria-label
attributes are updated to reflect the current state.type="password"
after 5 seconds.For the icon swap to work, we need to define eyeOpenIcon
and eyeClosedIcon
as strings containing SVG paths.
const eyeOpenIcon = `
<svg width="24" height="24" viewBox="0 0 24 24">
<!-- Eye open SVG path -->
</svg>
`;
const eyeClosedIcon = `
<svg width="24" height="24" viewBox="0 0 24 24">
<!-- Eye closed SVG path -->
</svg>
`;
Ensure that the SVGs are optimized and accessible.
Accessibility is critical for inclusivity. Here are the steps we've taken:
aria-label
provides descriptive text for screen readers. aria-pressed
indicates the toggle state.Enter
or Space
).<button>
instead of <div>
or <span>
ensures proper semantics and built-in accessibility features.Additional considerations:
.password-field button:focus {
outline: 2px solid #80bdff;
outline-offset: 2px;
}
While improving usability, we must not compromise security.
togglePasswordButton.addEventListener('click', () => {
// Existing logic...
// Log the event (ensure compliance with privacy policies)
logPasswordToggleEvent();
});
function logPasswordToggleEvent() {
// Implement logging logic (e.g., send to server or analytics)
}
Ensure that logging complies with user privacy regulations like GDPR.
Testing is crucial to ensure the feature works as intended across different scenarios.
Implementing an advanced "show password" feature involves more than toggling an input's type
attribute. By considering security, accessibility, and user experience, we create a robust and professional solution that enhances our web applications.
Key Takeaways:
By following these best practices, we can provide users with a feature that is both helpful and secure, reflecting the professionalism expected in modern web development.
If you found this tutorial helpful and want to dive deeper into advanced web development techniques, I invite you to subscribe to my YouTube channel. There, I regularly share in-depth tutorials, tips, and best practices on HTML, CSS, JavaScript, and more.
By joining our growing community of developers, you'll stay up-to-date with the latest trends and gain valuable insights that can elevate your web development skills to the next level. Don't miss out—click here to subscribe now and be part of a network that's passionate about crafting exceptional web experiences.
Further Reading: