2012-10-17 5 views
9

जब आप jQuery UI का उपयोग करके एक मॉडल संवाद खोलते हैं, तो आप देखेंगे कि यदि आप टैब कुंजी का उपयोग करते हैं, तो आप संवाद के बटन पर ध्यान केंद्रित कर सकते हैं, लेकिन संवाद के बाहर किसी भी इनपुट को अनदेखा कर दिया जाता है। मैं jQuery UI Tools Overlay के साथ इसी व्यवहार को प्राप्त करने की कोशिश कर रहा हूं, लेकिन मुझे यकीन नहीं है कि jQuery UI यह कैसे कर रहा है। ऐसा लगता है कि तत्वों के टैब इंडेक्स को -1 तक सेट नहीं किया जा रहा है, और इसके अलावा, ऐसा करना बेहद कठिन होगा क्योंकि इसमें सभी फोकस करने योग्य तत्वों को शामिल करना शामिल होगा जो संवाद का हिस्सा नहीं हैं। यदि आपको स्वचालन की आवश्यकता है तो यह बहुत अच्छा नहीं होगा। क्या कुछ को छोड़कर पृष्ठ के सभी तत्वों को फोकस करने का कोई तरीका है?jQuery UI संवाद पृष्ठभूमि इनपुट पर फ़ोकस कैसे अक्षम करता है?

उत्तर

9

संवाद विजेट वास्तव में keypress ईवेंट को संभालता है और अपना टैब कुंजी प्रोसेसिंग करता है। यह प्रसंस्करण संवाद के बाहर टैब करने योग्य तत्वों को अनदेखा करता है।

प्रासंगिक स्रोत कोड (लाइनों 286 current version at the time of this post में 305 करने के लिए) है:

// prevent tabbing out of modal dialogs 
if (options.modal) { 
    uiDialog.bind('keypress.ui-dialog', function(event) { 
     if (event.keyCode !== $.ui.keyCode.TAB) { 
      return; 
     } 

     var tabbables = $(':tabbable', this), 
      first = tabbables.filter(':first'), 
      last = tabbables.filter(':last'); 

     if (event.target === last[0] && !event.shiftKey) { 
      first.focus(1); 
      return false; 
     } else if (event.target === first[0] && event.shiftKey) { 
      last.focus(1); 
      return false; 
     } 
    }); 
} 

ध्यान दें कि TrueBlueAussie की टिप्पणी सही है, और संवाद गलत घटना के लिए बाध्य करने के लिए इस्तेमाल विजेट की कि रिहाई। keydownkeypress के बजाय इस्तेमाल किया जाना चाहिए: jQuery चयनकर्ता इंजन के लिए और जब

// prevent tabbing out of modal dialogs 
this._on(uiDialog, { 
    keydown: function(event) { 
     if (!options.modal || event.keyCode !== $.ui.keyCode.TAB) { 
      return; 
     } 
     var tabbables = $(":tabbable", uiDialog), 
      first = tabbables.filter(":first"), 
      last = tabbables.filter(":last"); 
     if (event.target === last[0] && !event.shiftKey) { 
      first.focus(1); 
      return false; 
     } else if (event.target === first[0] && event.shiftKey) { 
      last.focus(1); 
      return false; 
     } 
    } 
});​ 

यह jQuery यूआई की तरह दिखता है एक फिल्टर (:tabbable) कहते हैं:

uiDialog.bind('keydown.ui-dialog', function(event) { 
    // ... 
}); 
+0

आह हाँ, यह थोड़ा मुश्किल अनुकरण करने के लिए है, लेकिन यह मैं के लिए क्या देख रहा था। धन्यवाद – JayPea

+1

ध्यान दें कि क्या यह एक मिस-कॉपी था, या आपके द्वारा उद्धृत स्रोत उसी तारीख से j08691 के उत्तर से अलग था, लेकिन ऐसा करने के लिए इस टैब-कुंजी हैंडलिंग को 'कीडाउन' की आवश्यकता है, न कि' keypress'। 'कीप्रेस' बहुत देर हो चुकी है (या टैब के लिए बिल्कुल भी आग नहीं है)। –

+0

@TueuelueAussie, जो निश्चित रूप से एक मिस्कोपी नहीं था (मैंने मूल स्रोत [वहां] को ट्रैक किया [https://github.com/jquery/jquery-ui/blob/1.8/ui/jquery.ui.dialog.js)), लेकिन हो सकता है कि मैंने एक बग कॉपी-पेस्ट किया हो, हाँ :) मैं लिंक और बग ठीक कर दूंगा। –

4

यहाँ है कि इस संभालती कोड का हिस्सा है संवाद सक्रिय है, यह केवल टैब को मोडल के टैबबल योग्यताओं के बीच चक्र करने की अनुमति देता है।

कोड से: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

+0

आज के रूप में 'कीडाउन' सही है। 'फ्रेडेरिक हामिदी' का उत्तर 'कीप्रेस' का उपयोग करता है और 'टैब' कुंजी के लिए ट्रिगर नहीं करता है। +1 –

संबंधित मुद्दे