To build a Show/Hide Password toggle, you dynamically switch the type attribute of an HTML input element between password (obscured) and text (visible).
Here is the complete step-by-step guide using HTML, CSS, and vanilla JavaScript. 1. Structure the HTML
You need a container to hold your password field and a clickable element (like a button or text span) to act as the toggle switcher.
Use code with caution. 2. Position the Toggle with CSS
Use relative and absolute positioning to cleanly place the button directly inside the right boundary of the input field. Use code with caution. 3. Write the JavaScript Logic
Target both elements in the DOM and use an addEventListener to intercept user clicks. Evaluate the current type property and swap it accordingly. javascript
// Target the DOM elements const passwordInput = document.getElementById(‘password’); const toggleButton = document.getElementById(‘togglePassword’); // Listen for a click event on the button toggleButton.addEventListener(‘click’, function () { // Check the current state of the input type if (passwordInput.type === ‘password’) { passwordInput.type = ‘text’; // Reveal the password toggleButton.textContent = ‘Hide’; // Update button text } else { passwordInput.type = ‘password’; // Mask the password toggleButton.textContent = ‘Show’; // Update button text } }); Use code with caution. Why This Works
By default, web browsers treat type=“password” natively by rendering masking characters like dots or asterisks. Changing that property values to type=“text” instantly signals the browser’s engine to render the actual string characters safely on the screen. Pro-Tips for Modern Implementation
Accessibility (a11y): Always use a instead of a plain generic
Tab key and activate it using the Space or Enter keys.
Using Icons: If you want to use visual eye icons (like FontAwesome or Google Material icons), update the className or the image src inside your if/else block instead of the text string.
Leave a Reply