Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to toggle between password visibility with JavaScript?
To toggle between password visibility with JavaScript, you can change the input type between "password" and "text" using a checkbox or button. This allows users to see their password when needed.
How It Works
The toggle functionality works by:
- Adding an event listener to a checkbox or button
- Checking the current input type
- Switching between "password" and "text" types
Example: Using Checkbox Toggle
<!DOCTYPE html>
<html>
<head>
<title>Password Toggle Example</title>
</head>
<body>
<h1>Password Visibility Toggle</h1>
<label for="inputPass">Password:</label>
<input type="password" value="mySecurePass123" id="inputPass" /><br /><br />
<input class="check" type="checkbox" id="showPass" />
<label for="showPass">Show Password</label>
<script>
document.querySelector(".check").addEventListener("click", showPass);
function showPass() {
var inputPassEle = document.getElementById("inputPass");
if (inputPassEle.type === "password") {
inputPassEle.type = "text";
} else {
inputPassEle.type = "password";
}
}
</script>
</body>
</html>
Alternative: Using Button Toggle
<!DOCTYPE html>
<html>
<head>
<title>Password Button Toggle</title>
</head>
<body>
<h1>Password Toggle with Button</h1>
<label for="password">Password:</label>
<input type="password" value="secretPassword456" id="password" />
<button id="toggleBtn">?? Show</button>
<script>
const passwordField = document.getElementById("password");
const toggleButton = document.getElementById("toggleBtn");
toggleButton.addEventListener("click", function() {
if (passwordField.type === "password") {
passwordField.type = "text";
toggleButton.textContent = "? Hide";
} else {
passwordField.type = "password";
toggleButton.textContent = "?? Show";
}
});
</script>
</body>
</html>
Key Points
- Input Type: Toggle between "password" and "text" types
- Event Listener: Use "click" event on checkbox or button
- Conditional Logic: Check current type before switching
- User Experience: Provide clear visual feedback (button text, icons)
Comparison
| Method | User Interface | Best Use Case |
|---|---|---|
| Checkbox | Checkbox with label | Forms with multiple options |
| Button | Clickable button with icons | Modern login forms |
Output
When the checkbox is unchecked, the password appears as dots or asterisks. When checked, the actual password text becomes visible:
Conclusion
Password visibility toggle improves user experience by allowing users to verify their password input. Use checkbox for simple forms or button with icons for modern interfaces.
Updated on: 2026-03-15T23:18:59+05:30
253 Views
Advertisements