DIV तत्व पर मुख्य प्रेस (या कीडाउन) ईवेंट कैप्चर करें

Question

आप DIV तत्व (jQuery का उपयोग करके) पर कीप या की-डाउन इवेंट को कैसे फँसाते हैं?

DIV तत्व को ध्यान देने के लिए क्या आवश्यक है?

Comments

डिव के लिए "फोकस" का क्या अर्थ है?

— जोनाथन फॉस्ट

टैब्डेक्स होने पर इसे टैब करने के अलावा jboyd, आप इसे खोजने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं और इस पर फोकस विधि को कॉल कर सकते हैं।

— ब्रेंडन एनरिक

@ लालचंद ... क्या आप मेरे जवाब को स्वीकार कर सकते हैं? :)

— हेले

Answer 1

(1) tabindexविशेषता सेट करें :

<div id="mydiv" tabindex="0" />

(2) कीड से बांधें:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

प्रारंभ पर ध्यान केंद्रित करने के लिए:

$(function() {
   $('#mydiv').focus();
});

हटाने के लिए - यदि आपको यह पसंद नहीं है - divफ़ोकस बॉर्डर, outline: noneCSS में सेट करें।

अधिक संभावनाओं के लिए कीकोड की तालिका देखें keyCode।

कोड के सभी आप संभालने jQuery का उपयोग करें।

#

Comments

+1 टैबइंडेक्स यहाँ 'div' को चुनने के लिए महत्वपूर्ण बिंदु है। JQuery आवश्यक नहीं है, यही बात सादे जावास्क्रिप्ट घटनाओं के साथ कोणीय (साथ ही मुझे लगता है) के साथ काम करती है।

— जुक्का डाहलबॉम

इसके लिए ब्राउज़र समर्थन क्या है?

— ज्ञातव्य

tabindex एक महत्वपूर्ण हिस्सा है, लेकिन इसे "0" के अलावा किसी भी मूल्य पर सेट न करें। 0 से ऊपर कुछ भी बनाना नेत्रहीन उपयोगकर्ताओं के लिए स्क्रीन रीडर्स को गड़बड़ाने वाला है (यह पृष्ठ पर सब कुछ छोड़ देगा और 0 से ऊपर किसी भी टैबइंडेक्स पर सीधे जाएगा)। tabindex = "0" इसे "टैब्लेबल" बनाता है। आपके पास tabindex = "0" के साथ अनंत तत्व हो सकते हैं

— ज़ोनाबी

<प्री> के साथ भी काम करता है!

— dfmiller

अति उत्कृष्ट! मुझे टैबइंडेक्स विशेषता याद आ रही थी, हो सकता है कि जब तक कि उनके पास टैबइंडेक्स नहीं है, तब तक DIV का ध्यान केंद्रित नहीं हो सकता। धन्यवाद दोस्त! मेरी ज़िंदगी बचाई! संपादित करें: रिएक्ट के साथ भी काम करता है

— विनीसियस नेग्रो

Answer 2

यहाँ उदाहरण जेएस पर:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})

#myDiv {
  outline: none;
}

<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

Comments

यह उत्तर कैसे देता है?

— बक बक

Answer 3

tabindex HTML विशेषता इंगित करती है कि क्या इसका तत्व केंद्रित हो सकता है, और यदि / जहां यह अनुक्रमिक कीबोर्ड नेविगेशन में भाग लेता है (आमतौर पर Tabकुंजी के साथ )। एमडीएन वेब डॉक्स पढ़ेंपूर्ण संदर्भ के लिए ।

Jquery का उपयोग करना

$( "#division" ).keydown(function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
});

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="division" tabindex="0"></div>

जावास्क्रिप्ट का उपयोग करना

var el = document.getElementById("division");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
};

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<div id="division" tabindex="0"></div>

Comments

मैं वास्तव में यह ध्यान केंद्रित घटना फायरिंग के साथ एक मुद्दे की तलाश में पाया जब div खो नियंत्रण पर divs स्क्रॉलबार पर क्लिक करने के लिए कहते हैं, बस div के लिए tabstop जोड़ना तय था, इसलिए बहुत बहुत धन्यवाद

— माइक