मैं DIV को कीबोर्ड फ़ोकस कैसे दे सकता हूं और इसमें कीबोर्ड ईवेंट हैंडलर संलग्न कर सकता हूं?


83

मैं एक एप्लिकेशन का निर्माण कर रहा हूं, जहां मैं एक डीआईवी द्वारा प्रस्तुत आयत पर क्लिक करने में सक्षम होना चाहता हूं, और फिर कीबोर्ड की घटनाओं के लिए सूचीबद्ध करके उस डीआईवी को स्थानांतरित करने के लिए कीबोर्ड का उपयोग करता हूं।

दस्तावेज़ स्तर पर उन कीबोर्ड ईवेंट के लिए ईवेंट श्रोता का उपयोग करने के बजाय, क्या मैं DIV स्तर पर कीबोर्ड ईवेंट के लिए सुन सकता हूं, शायद इसे कीबोर्ड फ़ोकस देकर?

यहाँ समस्या का वर्णन करने के लिए एक सरल नमूना है:

<html>
<head>
</head>
<body>

<div id="outer" style="background-color:#eeeeee;padding:10px">
outer

   <div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;">
   want to be able to focus this element and pick up keypresses
   </div>
</div>

<script language="Javascript">

function onClick()
{
    document.getElementById('inner').innerHTML="clicked";
    document.getElementById('inner').focus();

}

//this handler is never called
function onKeypressDiv()
{
    document.getElementById('inner').innerHTML="keypress on div";
}

function onKeypressDoc()
{
    document.getElementById('inner').innerHTML="keypress on doc";
}

//install event handlers
document.getElementById('inner').addEventListener("click", onClick, false);
document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false);
document.addEventListener("keypress", onKeypressDoc, false);

</script>

</body>
</html>

आंतरिक DIV पर क्लिक करने पर, मैं इसे फ़ोकस देने की कोशिश करता हूं, लेकिन बाद में कीबोर्ड की घटनाओं को हमेशा दस्तावेज़ स्तर पर उठाया जाता है, मेरे DIV स्तर के इवेंट श्रोता पर नहीं।

क्या मुझे कीबोर्ड फ़ोकस की एप्लिकेशन-विशिष्ट धारणा लागू करने की आवश्यकता है?

मुझे जोड़ना चाहिए कि फ़ायरफ़ॉक्स में काम करने के लिए मुझे केवल इसकी आवश्यकता है।



1
वास्तव में एक डुबकी नहीं है - इसने कुछ दो साल पहले पूछा था, और यह पूछ रहा है कि कैसे उपयोग करने के बजाय, मनमाने तत्वों पर कीबोर्ड ईवेंट प्राप्त किया जाए। focus() फ़ंक्शन ।
पॉल डिक्सन

जवाबों:


165

सॉर्ट किया गया - मैंने लक्ष्य DIV में टैबइंडेक्स विशेषता जोड़ी, जिसके कारण यह कीबोर्ड ईवेंट उठा सकता है, उदाहरण के लिए

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

जानकारी से चमके Http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/CR29.html


6
इसके अलावा, यदि आप नहीं चाहते कि डिव को ध्यान में रखते हुए बिंदीदार नीला बॉर्डर मिल जाए, तो आप इसे स्टाइल कर सकते हैं outline: 0px solid tranparent;। देखें: stackoverflow.com/a/2260788/402807
AlcubierreDrive

4
या सेट tabindex="-1", वह भी बिंदीदार सीमा प्राप्त करने से रोक देगा।
troglobit

मुझे क्रोम 60 और एफएफ 54 में यह काम करने के लिए नहीं मिल सकता है। और IE11 जादुई रूप से भी बिना सही काम करता है tabindex। क्या यह उत्तर पुराना है?
jlh

यह मेरे लिए वर्तमान फ़ायरफ़ॉक्स में काम नहीं करता है। ब्राउज़र कीबोर्ड इनपुट को संभालता है। फिडेल के लिए भी।
कुबले

1
छुटकारा पाना outlineसुलभ नहीं है। यदि आप जिस तरह से इसे देखते हैं, वह पसंद नहीं है, तो मैं कुछ अन्य दृश्य संकेत देने की सलाह देता हूं जो कि छुटकारा पाने से पहले तत्व पर ध्यान केंद्रित करता हैoutline
स्लीपर

5

पॉल का जवाब ठीक काम करता है, लेकिन आप भी इस तरह से contentEditable का उपयोग कर सकते हैं ...

document.getElementById('inner').contentEditable=true;
document.getElementById('inner').focus();

कुछ मामलों में बेहतर हो सकता है।


6
यदि आप ऐसा करते हैं तो Chrome 17 फोकस पर तत्व पर एक कर्सर रखता है और आप तत्व पर सामान टाइप कर सकते हैं। मैं इसकी सिफारिश नहीं करूंगा।
Seppo Erviälä

1
@Seppo, यह एक अच्छी बात है। यदि आप कीबोर्ड ईवेंट का उपभोग कर रहे हैं, तो आप आवश्यक रूप से संपादित नहीं कर पाएंगे, लेकिन एक कर्सर होने से आप जो करने की कोशिश कर रहे हैं, उसके आधार पर गड़बड़ हो सकती है। संयोग से, यह सिर्फ क्रोम 17 नहीं है, बल्कि बहुत सारे हालिया ब्राउज़र हैं जो इस तरह से व्यवहार करते हैं - निश्चित रूप से एफएफ और सफारी - आईई मुझे भी विश्वास है, हालांकि मैंने हाल ही में परीक्षण नहीं किया है
पीटर बेग्नल
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.