JavaScript से पासवर्ड विजिबिलिटी टॉगल कैसे करें?

JavaScript का उपयोग करके पासवर्ड विजिबिलिटी (दिखाना/छुपाना) टॉगल करने का कोड नीचे दिया गया है।

उदाहरण

<!DOCTYPE html> 
<html> 
<head> 
  <h1>पासवर्ड विजिबिलिटी उदाहरण</h1> 
  पासवर्ड: <input type="password" value="abcd@1234" id="inputPass" /><br /><br /> 
  <input class="check" type="checkbox" />पासवर्ड दिखाएं 
  <h2>ऊपर दिए गए चेकबॉक्स पर क्लिक करके अपना पासवर्ड टेक्स्ट के रूप में देखें</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>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

"पासवर्ड दिखाएं" चेकबॉक्स चेक करने पर:

कैसे काम करता है:

• type="password" - बुलेट्स/डॉट्स दिखाता है (●●●●)
• type="text" - वास्तविक टेक्स्ट दिखाता है
• टॉगल - चेकबॉक्स क्लिक पर दोनों के बीच स्विच

बेहतर UX - आइकन बटन के साथ:

<div class="password-field">
  <input type="password" id="password" placeholder="पासवर्ड दर्ज करें">
  <button type="button" class="toggle-btn" aria-label="पासवर्ड दिखाएं/छुपाएं">
    <svg class="eye-open">...</svg>
    <svg class="eye-closed">...</svg>
  </button>
</div>

<style>
.password-field { position: relative; }
.toggle-btn { 
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; padding: 5px;
}
.eye-closed { display: none; }
input[type="text"] + .toggle-btn .eye-open { display: none; }
input[type="text"] + .toggle-btn .eye-closed { display: block; }
</style>

<script>
document.querySelector('.toggle-btn').addEventListener('click', () => {
  const input = document.getElementById('password');
  input.type = input.type === 'password' ? 'text' : 'password';
});
</script>

सुरक्षा विचार:

• ऑटोकंप्लीट - autocomplete="current-password" या सेट करें
• कॉपी-पेस्ट - पासवर्ड फील्ड में कॉपी-पेस्ट डिसेबल न करें (पासवर्ड मैनेजर्स के लिए)
• स्क्रीन रीडर्स - aria-label और उचित लेबलिंग
• शोल्डर सर्फिंग - पब्लिक जगहों पर पासवर्ड दिखाने से सावधान रहें

एक्सेसिबिलिटी:

<label for="password">पासवर्ड</label>
<input type="password" id="password" autocomplete="current-password" aria-describedby="pwd-hint">
<button type="button" aria-pressed="false" aria-label="पासवर्ड दिखाएं" onclick="togglePassword()">
  <span aria-hidden="true">👁️</span>
</button>
<span id="pwd-hint" class="sr-only">पासवर्ड विजिबिलिटी टॉगल करने के लिए बटन दबाएं</span>

मॉडर्न HTML (प्रयोगात्मक):

<input type="password" toggle> - कुछ ब्राउज़र्स में नेटिव टॉगल सपोर्ट आ रहा है।