जब आप jQuery UI का उपयोग करके एक मॉडल संवाद खोलते हैं, तो आप देखेंगे कि यदि आप टैब कुंजी का उपयोग करते हैं, तो आप संवाद के बटन पर ध्यान केंद्रित कर सकते हैं, लेकिन संवाद के बाहर किसी भी इनपुट को अनदेखा कर दिया जाता है। मैं jQuery UI Tools Overlay के साथ इसी व्यवहार को प्राप्त करने की कोशिश कर रहा हूं, लेकिन मुझे यकीन नहीं है कि jQuery UI यह कैसे कर रहा है। ऐसा लगता है कि तत्वों के टैब इंडेक्स को -1 तक सेट नहीं किया जा रहा है, और इसके अलावा, ऐसा करना बेहद कठिन होगा क्योंकि इसमें सभी फोकस करने योग्य तत्वों को शामिल करना शामिल होगा जो संवाद का हिस्सा नहीं हैं। यदि आपको स्वचालन की आवश्यकता है तो यह बहुत अच्छा नहीं होगा। क्या कुछ को छोड़कर पृष्ठ के सभी तत्वों को फोकस करने का कोई तरीका है?jQuery UI संवाद पृष्ठभूमि इनपुट पर फ़ोकस कैसे अक्षम करता है?
उत्तर
संवाद विजेट वास्तव में 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 की टिप्पणी सही है, और संवाद गलत घटना के लिए बाध्य करने के लिए इस्तेमाल विजेट की कि रिहाई। keydown
keypress
के बजाय इस्तेमाल किया जाना चाहिए: 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) {
// ...
});
यहाँ है कि इस संभालती कोड का हिस्सा है संवाद सक्रिय है, यह केवल टैब को मोडल के टैबबल योग्यताओं के बीच चक्र करने की अनुमति देता है।
कोड से: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js
आज के रूप में 'कीडाउन' सही है। 'फ्रेडेरिक हामिदी' का उत्तर 'कीप्रेस' का उपयोग करता है और 'टैब' कुंजी के लिए ट्रिगर नहीं करता है। +1 –
- 1. jQuery UI संवाद और टेक्स्ट इनपुट
- 2. jQuery UI पुष्टिकरण संवाद
- 3. jQuery UI संवाद के पृष्ठभूमि रंग को कैसे बदला जाए?
- 4. jQuery-UI स्लाइडर - कुंजीपटल इनपुट को अक्षम कैसे करें?
- 5. JQuery UI संवाद धीमा
- 6. एक jquery ui संवाद
- 7. jQuery ui पूर्णस्क्रीन संवाद
- 8. jquery ui संवाद
- 9. jquery ui संवाद
- 10. jquery ui संवाद
- 11. जावास्क्रिप्ट की जगह पर Jquery UI संवाद
- 12. jQuery UI संवाद अप्रत्याशित रूप से व्यवहार करता है
- 13. Jquery UI संवाद बटन पाठ
- 14. jQuery-UI संवाद रैपर div मुद्दा
- 15. पोजिशनिंग jquery ui संवाद बॉक्स
- 16. Jquery UI संवाद डिफ़ॉल्ट कैसे सेट करें
- 17. jQuery-UI संवाद मेमोरी लीक
- 18. jquery UI संवाद खुला है आईई 7
- 19. फ़ोकस पर इनपुट मान कैसे दिखाएं/छुपाएं?
- 20. jQuery UI संवाद बटन आईडी सेट करें?
- 21. मैं एक jQuery UI संवाद पर रोकथाम कैसे सेट करूं?
- 22. टॉगल इनपुट अक्षम jQuery
- 23. jQuery UI datepicker स्वचालित रूप से संवाद
- 24. एंड्रॉइड अलर्ट संवाद नकारात्मक बटन पर फ़ोकस कैसे सेट करें?
- 25. एक jquery संवाद
- 26. Jquery UI संवाद के अंदर इनपुट भेजा नहीं जा रहा है?
- 27. JQuery UI मोडल संवाद 100% CPU
- 28. jquery ui संवाद स्थिति ताज़ा करें
- 29. अक्षम jQuery के यूआई संवाद
- 30. jquery ui - नेस्टेड संवाद जेड-इंडेक्स मुद्दे
आह हाँ, यह थोड़ा मुश्किल अनुकरण करने के लिए है, लेकिन यह मैं के लिए क्या देख रहा था। धन्यवाद – JayPea
ध्यान दें कि क्या यह एक मिस-कॉपी था, या आपके द्वारा उद्धृत स्रोत उसी तारीख से j08691 के उत्तर से अलग था, लेकिन ऐसा करने के लिए इस टैब-कुंजी हैंडलिंग को 'कीडाउन' की आवश्यकता है, न कि' keypress'। 'कीप्रेस' बहुत देर हो चुकी है (या टैब के लिए बिल्कुल भी आग नहीं है)। –
@TueuelueAussie, जो निश्चित रूप से एक मिस्कोपी नहीं था (मैंने मूल स्रोत [वहां] को ट्रैक किया [https://github.com/jquery/jquery-ui/blob/1.8/ui/jquery.ui.dialog.js)), लेकिन हो सकता है कि मैंने एक बग कॉपी-पेस्ट किया हो, हाँ :) मैं लिंक और बग ठीक कर दूंगा। –