Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

कैसे पता करें कि जावास्क्रिप्ट के साथ इनपुट फ़ील्ड के अंदर कैप्सलॉक चालू है या नहीं?


यह पता लगाने के लिए कि क्या जावास्क्रिप्ट के साथ इनपुट फ़ील्ड के अंदर कैप्सलॉक चालू है, कोड इस प्रकार है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
   #textBox {
      display: none;
      color: red;
   }
</style>
<body>
<h1>Detecting Caps Lock Example</h1>
<input class="inputfield" value="Some textBox.." />
<h2>Press caps lock in the above input field to check warning</h2>
<h2 class="textBox">WARNING! Caps lock is ON.</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>

आउटपुट

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

कैसे पता करें कि जावास्क्रिप्ट के साथ इनपुट फ़ील्ड के अंदर कैप्सलॉक चालू है या नहीं?

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

कैसे पता करें कि जावास्क्रिप्ट के साथ इनपुट फ़ील्ड के अंदर कैप्सलॉक चालू है या नहीं?


  1. जावास्क्रिप्ट के साथ टेक्स्ट इनपुट फ़ील्ड में ENTER कुंजी का पता लगाएं

    आप ENTER कुंजी के लिए keyCode 13 का उपयोग कर सकते हैं। आइए पहले इनपुट बनाएं - <input type="text" id="txtInput"> अब, ENTER कुंजी का पता लगाने के लिए keyCode के साथ on() का उपयोग करते हैं। पूरा कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html lang="en"&g

  1. इसके अंदर इनपुट फ़ील्ड के साथ नेविगेशन मेनू कैसे बनाएं?

    इसके अंदर एक इनपुट फ़ील्ड के साथ एक नेविगेशन मेनू बनाने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document&

  1. सीएसएस के साथ फोकस पर इनपुट फ़ील्ड को कैसे साफ़ करें?

    निम्नलिखित कोड है फोकस पर इनपुट फ़ील्ड को साफ़ करने के लिए - उदाहरण <!DOCTYPE html> <html> <head> <h1>Clearing an input field on focus example</h1> <input type="text" onfocus="this.value=''" value="Some random text..."> <h2