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

एचटीएमएल डोम कीबोर्डइवेंट ऑब्जेक्ट

<घंटा/>

HTML DOM कीबोर्डइवेंट ऑब्जेक्ट एक ईवेंट का प्रतिनिधित्व करता है जब उपयोगकर्ता कीबोर्ड पर एक कुंजी दबाता है।

गुण

यहां, “कीबोर्डइवेंट” निम्नलिखित गुण और विधियाँ हो सकती हैं -

संपत्ति/विधि विवरण
altKey यह लौटाता है कि "ALT" कुंजी को दबाया गया था या नहीं
चारकोड यह कुंजी का यूनिकोड वर्ण कोड लौटाता है
कोड यह कुंजी का कोड लौटाता है
ctrlKey यह लौटाता है कि "CTRL" कुंजी को दबाया गया था या नहीं
getModifierState() यदि निर्दिष्ट कुंजी सक्रिय है तो यह सही है और निष्क्रिय होने पर गलत है
रचना है यह लौटाता है कि घटना की स्थिति बना रही है या नहीं
कुंजी यह ईवेंट द्वारा दर्शाई गई कुंजी का मुख्य मान देता है
कीकोड यह घटना को ट्रिगर करने वाली कुंजी का यूनिकोड वर्ण कोड लौटाता है
स्थान यह कीबोर्ड या डिवाइस पर एक कुंजी का स्थान लौटाता है
मेटाकी यह लौटाता है कि कुंजी ईवेंट ट्रिगर होने पर "मेटा" कुंजी को दबाया गया था या नहीं
दोहराएं यह लौटाता है कि किसी कुंजी को बार-बार दबाया जा रहा है या नहीं
ShiftKey यह लौटाता है कि कुंजी ईवेंट ट्रिगर होने पर "SHIFT" कुंजी को दबाया गया था या नहीं
जो यह घटना को ट्रिगर करने वाली कुंजी का यूनिकोड वर्ण कोड लौटाता है

ईवेंट

और, निम्नलिखित ईवेंट हैं जो कीबोर्डइवेंट ऑब्जेक्ट पर कार्य करते हैं -

ईवेंट विवरण
ऑनकीडाउन ईवेंट तब होती है जब उपयोगकर्ता एक कुंजी दबा रहा होता है
ऑनकीप्रेस ईवेंट तब होता है जब उपयोगकर्ता एक कुंजी दबाता है
ऑनकीअप ईवेंट तब होता है जब उपयोगकर्ता एक कुंजी जारी करता है

उदाहरण

आइए कुंजी . के लिए एक उदाहरण देखें संपत्ति -

<!DOCTYPE html>
<html>
<head>
<title>KeyboardEvent key</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>KeyboardEvent-key</legend>
<label>Fill in the blanks:
<input type="text" id="textSelect" placeholder="__ for Ball" onkeypress="getEventData(event)" autocomplete="off">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var textSelect = document.getElementById("textSelect");
   function getEventData(InputEvent) {
      if(InputEvent.key === 'B')
         divDisplay.textContent = 'Correct Answer';
      else if(InputEvent.key === 'b')
         divDisplay.textContent = 'Close call, you might have caps lock turned off';
      else
         divDisplay.textContent = 'Try Again, '+textSelect.placeholder;
      textSelect.textContent = '';
   }
</script>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा -

टेक्स्ट फील्ड में कुछ भी टाइप करने से पहले -

एचटीएमएल डोम कीबोर्डइवेंट ऑब्जेक्ट

'b' . टाइप करने के बाद टेक्स्ट फ़ील्ड में -

एचटीएमएल डोम कीबोर्डइवेंट ऑब्जेक्ट

‘B’ typing टाइप करने के बाद टेक्स्ट फ़ील्ड में -

एचटीएमएल डोम कीबोर्डइवेंट ऑब्जेक्ट


  1. एचटीएमएल डोम कीबोर्डइवेंट ऑल्टकी प्रॉपर्टी

    HTML DOM KeyboardEvent altKey प्रॉपर्टी लौटाती है कि क्या कोई ALT . है कुंजी को दबाया गया था या नहीं जब किसी HTML दस्तावेज़ में कोई महत्वपूर्ण ईवेंट ट्रिगर किया गया था। सिंटैक्स निम्नलिखित वाक्य रचना है - event.altKey आइए हम HTML KeyboardEvent altKey गुण का एक उदाहरण देखें- उदाहरण <!DOCTYPE ht

  1. एचटीएमएल डोम एचआर ऑब्जेक्ट

    HTML DOM HR ऑब्जेक्ट HTML दस्तावेज़ के तत्व का प्रतिनिधित्व करता है। घंटा वस्तु बनाएं− सिंटैक्स निम्नलिखित वाक्य रचना है - दस्तावेज़.क्रिएट एलीमेंट (एचआर); आइए हम घंटा वस्तु का एक उदाहरण देखें- उदाहरण body { text-align:center; पृष्ठभूमि-रंग:#fff; रंग:#0197F6; } h1 {रंग:#23CE6B; } .btn {पृष्ठभूम

  1. एचटीएमएल डोम उल ऑब्जेक्ट

    एचटीएमएल में एचटीएमएल डोम उल ऑब्जेक्ट . का प्रतिनिधित्व करता है तत्व। एक बनाना तत्व var ulObject = document.createElement(“UL”) यहां, “ulObject” निम्न गुण हो सकते हैं लेकिन HTML5 . में समर्थित नहीं हैं - संपत्ति विवरण कॉम्पैक्ट इससे सेट/रिटर्न होता है कि क्या अनियंत्रित सूची