jQuery ध्यान केंद्रित घटना खो देते हैं

Question

मैं एक कंटेनर को दिखाने की कोशिश कर रहा हूं यदि इनपुट क्षेत्र पर ध्यान केंद्रित किया जाता है और - यही वास्तविक समस्या है - कंटेनर को छिपाएं यदि फोकस खो जाता है। क्या jQuery के फोकस के लिए एक विपरीत घटना है?

कुछ उदाहरण कोड:

<input type="text" value="" name="filter" id="filter"/>

<div id="options">some cool options</div>

<script type="text/javascript">
  $('#options').hide();

  $('#filter').focus(function() {
    $('#options').appear();
  });
</script>

और जो मैं करना चाहता हूं वह कुछ इस तरह है:

$('#filter').focus_lost(function() {
  $('#options').hide();
});

Answer 1

जब तत्व खोता है तो अपने फ़ंक्शन को कॉल करने के लिए ब्लर ईवेंट का उपयोग करें :

$('#filter').blur(function() {
  $('#options').hide();
});

Comments

क्या होगा यदि क्रोम ऑटो जैसे ब्राउज़र टेक्स्टबॉक्स को भरते हैं, मुझे नहीं लगता कि यह कलंक को ट्रिगर करेगा ()

— pita

Answer 2

ऐशे ही:

$(selector).focusout(function () {
    //Your Code
});

Comments

इससे क्या फर्क पड़ता है blur?

— क्रैगॉक्स

धब्बा विधि का उपयोग फ़ोकस को हटाने के लिए किया जाता है (अर्थात गैर-चालू करें) वह वस्तु जो वह है। एक टेक्स्ट फ़ील्ड देने से धब्बा कर्सर को अगले फ़ील्ड में ले जाएगा। एक खिड़की देने से धब्बा उसे अन्य सभी के पीछे ले जाएगा। यह एक आरक्षित शब्द नहीं है, इसलिए आप अपने स्वयं के चर या फ़ंक्शन को धब्बा कह सकते हैं, लेकिन यदि आप ऐसा करते हैं, तो आप इस पद्धति का उपयोग करने में सक्षम नहीं होंगे जो वस्तु चालू है।

— साफ्टवेयर

फ़ोकस विधि का उपयोग फ़ोकस देने के लिए किया जाता है (यानी करंट करें) वह वस्तु जो वह है। टेक्स्ट फ़ील्ड देने से फ़ोकस कर्सर को उस फ़ील्ड में ले जाएगा। एक विंडो देने पर ध्यान इसे दूसरों के सामने ले जाएगा। क्रियाएँ जो फ़ोकस वाले का उपयोग करने के लिए लागू करने के लिए किसी विशेष ऑब्जेक्ट को निर्दिष्ट नहीं करती हैं। यह एक आरक्षित शब्द नहीं है, इसलिए आप अपने स्वयं के चर या फ़ंक्शन को फ़ोकस घोषित कर सकते हैं, लेकिन यदि आप ऐसा करते हैं, तो आप इस पद्धति का उपयोग करने में सक्षम नहीं होंगे कि कौन सी वस्तु चालू है।

— साफ्टवेयर

सॉफ़्टवेयरमे की व्याख्या ने मुझे पहले पढ़ने में ज्यादा समझ नहीं दी, इसलिए मुझे jQuery के प्रलेखन पृष्ठ ( api.jquery.com/focusout ) पर एक वैकल्पिक स्पष्टीकरण मिला, जो मुझे लगा कि दूसरों के लिए उपयोगी होगा: फ़ोकटआउट घटना एक तत्व के लिए भेजी जाती है जब यह, या इसके अंदर कोई तत्व, ध्यान केंद्रित खो देता है। यह धब्बा घटना से अलग है कि यह मूल तत्वों से ध्यान हटाने के नुकसान का पता लगाने का समर्थन करता है (दूसरे शब्दों में, यह घटना बुशिंग का समर्थन करता है)।

— ब्रैड

Answer 3

"ब्लर" का प्रयोग करें: http://docs.jquery.com/Events/blur#fn

Answer 4

धब्बा घटना: जब तत्व ध्यान केंद्रित खो देता है।

फोकसआउट घटना: जब तत्व, या इसके अंदर कोई तत्व, फोकस खो देता है।

चूंकि फ़िल्टर तत्व के अंदर कुछ भी नहीं है, इस मामले में धब्बा और फोकसआउट दोनों काम करेंगे।

$(function() {
  $('#filter').blur(function() {
    $('#options').hide();
  });
})

धब्बा के साथ jsfiddle: http://jsfiddle.net/yznhb8pc/

$(function() {
  $('#filter').focusout(function() {
    $('#options').hide();
  });
})

फोकस के साथ jsfiddle: http://jsfiddle.net/yznhb8pc/1/

Answer 5

यदि फ़ील्ड के फोकस होने से पहले 'कूल ऑप्शंस' दृश्य से छिपाए जाते हैं तो आप इसे डोम में रखने के बजाय JQuery में बनाना चाहेंगे, ताकि स्क्रीन रीडर का उपयोग करने वाला कोई भी व्यक्ति अनावश्यक जानकारी न देख सके। जब हमें इसे नहीं देखना है तो उन्हें क्यों सुनना चाहिए?

तो आप चर को सेटअप कर सकते हैं जैसे:

var $coolOptions= $("<div id='options'></div>").text("Some cool options");

और फिर ध्यान केंद्रित पर (या पूर्वसर्ग) जोड़ें

$("input[name='input_name']").focus(function() {
    $(this).append($coolOptions);
});

और फिर फोकस खत्म होने पर हटा दें

$("input[name='input_name']").focusout(function() {
    $('#options').remove();
});