JavaScript से इनपुट फील्ड में कैप्स लॉक ऑन है या नहीं पता करें

JavaScript का उपयोग करके इनपुट फील्ड में कैप्स लॉक (Caps Lock) ऑन है या नहीं पता करने का कोड नीचे दिया गया है।

उदाहरण

<!DOCTYPE html> 
<html> 
<head> 
  <style> 
    #textBox { display: none; color: red; } 
  </style> 
</head> 
<body> 
  <h1>कैप्स लॉक डिटेक्शन उदाहरण</h1> 
  <input class="inputfield" value="कुछ टेक्स्ट.." /> 
  <h2>ऊपर दिए गए इनपुट फील्ड में कैप्स लॉक दबाकर चेतावनी देखें</h2> 
  <h2 class="textBox">चेतावनी! कैप्स लॉक ऑन है।</h2> 
  <script> 
    var input = document.querySelector(".inputfield"); 
    var textBox = document.querySelector(".textBox"); 
    input.addEventListener("keyup", event => { 
      if (event.getModifierState("CapsLock")) { 
        textBox.style.display = "block"; 
      } else { 
        textBox.style.display = "none"; 
      } 
    }); 
  </script> 
</body> 
</html>

आउटपुट

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

कैप्स लॉक ऑन करके इनपुट फील्ड में टाइप करने पर:

getModifierState() मेथड:

event.getModifierState(key)

• पैरामीटर - मॉडिफायर की नाम: "CapsLock", "Shift", "Control", "Alt", "Meta", "NumLock", "ScrollLock"
• रिटर्न - true अगर मॉडिफायर सक्रिय है, false अन्यथा
• सपोर्ट - सभी आधुनिक ब्राउज़र्स

व्यावहारिक उपयोग - पासवर्ड फील्ड में चेतावनी:

const passwordInput = document.getElementById('password');
const capsWarning = document.getElementById('caps-warning');

passwordInput.addEventListener('keyup', (e) => {
  if (e.getModifierState('CapsLock')) {
    capsWarning.style.display = 'block';
    capsWarning.textContent = '⚠️ कैप्स लॉक ऑन है - पासवर्ड केस-सेंसिटिव है';
  } else {
    capsWarning.style.display = 'none';
  }
});

// फोकस पर भी चेक करें
passwordInput.addEventListener('focus', (e) => {
  if (e.getModifierState('CapsLock')) {
    capsWarning.style.display = 'block';
  }
});

CSS-ओनली विकल्प (सीमित):

/* केवल :focus-within और सिबलिंग सेलेक्टर के साथ संभव, भरोसेमंद नहीं */
input:focus + .caps-warning::after {
  content: "कैप्स लॉक चालू है";
}

बेस्ट प्रैक्टिस:

• keyup इवेंट - keypress डिप्रिकेटेड है, keyup उपयोग करें
• फोकस पर भी चेक - यूजर कैप्स लॉक ऑन करके फोकस कर सकता है
• पासवर्ड फील्ड्स - विशेष रूप से पासवर्ड फील्ड्स के लिए महत्वपूर्ण
• नॉन-इनट्रूसिव - चेतावनी डिसमिसिबल होनी चाहिए, ब्लॉकिंग नहीं

ब्राउज़र सपोर्ट:

सभी आधुनिक ब्राउज़र्स (Chrome 37+, Firefox 32+, Safari 10+, Edge 12+)