jQuery संवाद ईएससी कुंजी घटना को कैसे रोकें?

Question

मेरे पास एक मॉडल jquery संवाद है और एक और तत्व है जो संवाद के पीछे ईएससी कुंजी घटना लेता है। जब jQuery संवाद चालू होता है, तो मैं नहीं चाहता कि यह ईएससी कुंजी ईवेंट प्रसारित करे। अब क्या होता है कि जब मैं ईएससी पर क्लिक करता हूं, तो यह संवाद बंद कर देगा और पृष्ठभूमि तत्व पर ईएससी ईवेंट हैंडलर को ट्रिगर करेगा।

जब jQuery संवाद को खारिज कर दिया जाता है तो मैं ईएससी कुंजी ईवेंट कैसे खा सकता हूं?

Answer 1

आंतरिक jQuery यूआई के संवाद के closeOnEscape विकल्प स्वयं दस्तावेज़ के लिए एक keydown श्रोता संलग्न द्वारा कार्यान्वित किया जाता है । इसलिए, कुंजीपटल घटना शीर्ष स्तर तक सभी तरह से बुलबुले होने के बाद संवाद बंद हो जाता है।

तो यदि आप संवाद को बंद करने के लिए एस्केप कुंजी का उपयोग करना जारी रखना चाहते हैं, और आप एस्केप कुंजी को पैरेंट नोड्स में प्रचार करने से रोकना चाहते हैं, तो आपको closeOnEscape कार्यक्षमता को स्वयं के साथ-साथ उपयोग करने की आवश्यकता होगी इवेंट ऑब्जेक्ट पर stopPropagation विधि (MDN article on event.stopPropagation देखें)।

(function() { 
    var dialog = $('whatever-selector-you-need') 
    .dialog() 
    .on('keydown', function(evt) { 
     if (evt.keyCode === $.ui.keyCode.ESCAPE) { 
      dialog.dialog('close'); 
     }     
     evt.stopPropagation(); 
    }); 
}()); 

यह क्या होता है संवाद के भीतर होने वाली सभी कीडाउन घटनाओं के लिए सुनता है। यदि कुंजी दबाया जाता है तो बचने की कुंजी आप सामान्य के रूप में संवाद बंद कर देते हैं, और इससे कोई फर्क नहीं पड़ता कि evt.stopPropagation कॉल कुंजीपटल को पैरेंट नोड्स पर बुलबुले से रोकता है।

मेरे पास यह एक लाइव उदाहरण है जो इसे दिखा रहा है - http://jsfiddle.net/ud9KL/2/।

Answer 2

संवाद के पीछे आपके तत्व के लिए कोड को संशोधित करने की आवश्यकता होगी ताकि यह देखने के लिए कि संवाद खुला था या बचने की कुंजी दबाई गई थी और उस स्थिति को अनदेखा कर दिया गया था।

Answer 3

आप closeOnEscape जरूरत है ...

उदाहरण कोड:

$(function() { 
$("#popup").dialog({ 
height: 200, 
width: 400, 
resizable: false, 
autoOpen: true, 
modal: true, 
closeOnEscape: false 
}); 
}); 

यह लाइव देखें: http://jsfiddle.net/vutdV/

Answer 4

आप जवाब के लिए निम्नलिखित

$(document).keyup(function (e) { 
     if (e.keyCode == 27) { 

      $('#YourDialogID').dialog('close') 
     } 
    });