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

<घंटा/>

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 टाइप करने के बाद टेक्स्ट फ़ील्ड में -

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