জাভাস্ক্রিপ্ট দিয়ে পাসওয়ার্ড ভিজিবিলিটি টগল করার কোড।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<h1>Password visibility example</h1>
Password: <input type="password" value="abcd@1234" id="inputPass" /><br /><br />
<input class="check" type="checkbox" />Show Password
<h2>Click on the above checkbox to see your password as text</h2>
<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>আউটপুট
চেকবক্স চেক করলে পাসওয়ার্ড টেক্সট হিসেবে দেখাবে, আনচেক করলে বুলেট/ডট হিসেবে।
উন্নত সংস্করণ (আইকন সহ)
<div class="password-field">
<input type="password" id="pwd" placeholder="Enter password" />
<button type="button" id="togglePwd" aria-label="Toggle password visibility">
<svg class="eye-open">...</svg>
<svg class="eye-closed">...</svg>
</button>
</div>
<style>
.password-field { position: relative; display: flex; align-items: center; }
.password-field input { padding-right: 40px; width: 100%; }
.password-field button {
position: absolute; right: 10px; background: none; border: none; cursor: pointer;
}
.password-field input[type="text"] + button .eye-open { display: none; }
.password-field input[type="password"] + button .eye-closed { display: none; }
</style>
<script>
document.getElementById('togglePwd').addEventListener('click', () => {
const input = document.getElementById('pwd');
input.type = input.type === 'password' ? 'text' : 'password';
});
</script>সিকিউরিটি নোট
autocomplete="off"বাautocomplete="new-password"ব্যবহার করুন- পাসওয়ার্ড ফিল্ডে
type="password"ডিফল্ট রাখুন - HTTPS এনফোর্স করুন (পাসওয়ার্ড ট্রান্সমিশন সিকিউর করার জন্য)
- Content Security Policy (CSP) কনফিগার করুন
অ্যাক্সেসিবিলিটি
aria-labelবাaria-labelledbyটগল বাটনে যোগ করুন- কীবোর্ড নেভিগেশন সাপোর্ট (Tab + Enter/Space)
- স্ক্রিন রিডার অনুমোদন (aria-pressed স্টেট)
