क्या कोई तत्व चुनने वाले सभी तत्व प्राप्त करने के लिए कोई jQuery चयनकर्ता है?

Question

This answer बताता है कि कौन से HTML तत्व फोकस प्राप्त कर सकते हैं। क्या कोई jQuery चयनकर्ता है जो वास्तव में इन तत्वों से मेल खाता है?

अभी के लिए मैं बस $('input,select,textarea,a') का उपयोग कर रहा हूं, लेकिन मुझे आश्चर्य है कि कुछ और सटीक है या नहीं।

Answer 1

आप तत्वों है कि focus() समारोह के लिए जांच कर सकता है:

$('*').each(function() { 
    if(typeof this.focus == 'function') { 
    // Do something with this element 
    } 
}) ; 

संपादित थोड़ा और सोच रही थी, यह शायद समझ में आता है होगा *:visible बजाय * के सबसे अनुप्रयोगों के लिए चयनकर्ता के रूप में करने के लिए इस।

Answer 2

other SO answer referred to by the OP से:

आज की ब्राउज़रों HTMLElement पर ध्यान केंद्रित() को परिभाषित, ...

तो, यह focus लिए परीक्षण का अर्थ तत्व के सदस्य के रूप नहीं प्रभावी है , क्योंकि सभी तत्वों के पास यह होगा, भले ही वे वास्तव में ध्यान केंद्रित करते हैं या नहीं।

... लेकिन एक तत्व वास्तव में ध्यान देने के लिए ले नहीं होगा जब तक कि यह में से एक है:

• HTMLAnchorElement/HTMLAreaElement एक href * HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement लेकिन disabled साथ नहीं के साथ (यदि आप कोशिश करते हैं तो IE वास्तव में आपको एक त्रुटि देता है), और फ़ाइल अपलोडों के सुरक्षा कारणों के लिए असामान्य व्यवहार है
• HTMLIFrameElement (हालांकि इसे ध्यान में रखते हुए कुछ भी उपयोगी नहीं होता है)। अन्य एम्बेडिंग तत्व भी, शायद, मैंने उन सभी का परीक्षण नहीं किया है।
• एक tabindex

तो साथ कोई भी तत्व, एक jQuery Selector में स्पष्ट रूप से उन सभी के नामकरण के बारे में क्या?

$('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]') 

---

अद्यतन # 1:

मैं updated your jsFiddle here। यह काम प्रतीत होता है।

मैंने उपर्युक्त सूची में contenteditable विशेषता वाले तत्व भी जोड़े।

---

अद्यतन # 2:

के रूप में @ jfriend00 ने बताया, "उपयोग के आधार पर, एक तत्व है कि दिखाई नहीं देते हैं बाहर फिल्टर करने के लिए चाहते हो सकता है"। इसे पूरा करने के लिए, उपर्युक्त चयनकर्ता से उत्पन्न सेट पर .filter(':visible') लागू करें।

---

अद्यतन # 3: jQuery यूआई अब एक चयनकर्ता, :focusable, कि यह कार्य किया है:

Xavin pointed out के रूप में। यदि आप पहले ही jQuery UI का उपयोग कर रहे हैं, तो यह जाने का तरीका हो सकता है। यदि नहीं, तो आप check out how jQuery UI does it चाहते हैं। किसी भी मामले में, :focusable के लिए jQuery यूआई के पृष्ठ पर वर्णन उपयोगी है:

निम्न प्रकार के तत्वों फ़ोकस करने योग्य हैं अगर वे अक्षम नहीं कर रहे हैं: इनपुट का चयन करें, पाठ क्षेत्र, बटन, और वस्तु। अगर उनके पास href या tabindex विशेषता है तो एंकर फोकस करने योग्य हैं। क्षेत्र के तत्व फोकस करने योग्य हैं यदि वे किसी नामित मानचित्र के अंदर हैं, तो एक href विशेषता है, और मानचित्र का उपयोग करके एक दृश्यमान छवि है। अन्य सभी तत्व पूरी तरह से उनके टैबिडेक्स विशेषता और दृश्यता पर केंद्रित हैं।

तो, चयनकर्ता मैं ऊपर प्रस्तावित करीब है, लेकिन यह कुछ बारीकियों के लिए खाते में विफल रहता है।

यहां jQuery UI से फिसल गया कार्य है, इसे छोटे-छोटे अनुकूलन के साथ स्वयं निहित करने के लिए। (रूपांतरों अपरीक्षित हैं, लेकिन काम करना चाहिए):

function focusable(element) { 
    var map, mapName, img, 
     nodeName = element.nodeName.toLowerCase(), 
     isTabIndexNotNaN = !isNaN($.attr(element, "tabindex")); 
    if ("area" === nodeName) { 
     map = element.parentNode; 
     mapName = map.name; 
     if (!element.href || !mapName || map.nodeName.toLowerCase() !== "map") { 
      return false; 
     } 
     img = $("img[usemap=#" + mapName + "]")[0]; 
     return !!img && visible(img); 
    } 
    return (/input|select|textarea|button|object/.test(nodeName) ? 
     !element.disabled : 
     "a" === nodeName ? 
      element.href || isTabIndexNotNaN : 
      isTabIndexNotNaN) && 
     // the element and all of its ancestors must be visible 
     visible(element); 

    function visible(element) { 
     return $.expr.filters.visible(element) && 
     !$(element).parents().addBack().filter(function() { 
      return $.css(this, "visibility") === "hidden"; 
     }).length; 
    } 
} 

ध्यान दें: ऊपर समारोह अभी भी jQuery पर निर्भर करता है, लेकिन jQuery यूआई आवश्यकता नहीं होनी चाहिए।

Answer 3

यह जानने के लिए एक सामान्य परीक्षण है कि कोई तत्व किसी विशेष प्रकार के श्रोता का समर्थन करता है या नहीं, यह देखने के लिए कि क्या इसकी संबंधित संपत्ति है, उदा। फोकस घटना, उपयोग के लिए समर्थन के लिए परीक्षण करने के लिए:

if ('focus' in element) { 
    // element supports the focus event 
} 

हालांकि, वहाँ कुछ अपवाद हैं। How do you programmatically determine to which events an HTML object can listen for? के उत्तरों देखें।

Answer 4

फोकस करने योग्य तत्वों की एक सूची प्राप्त करने के बजाय, आप body तत्व पर फोकस हैंडलर स्थापित करने का प्रयास कर सकते हैं जो फोकस ईवेंट कैप्चर करता है।

$(document.body).on("focus", "*", function(e) { 
    //Scroll to e.target 
}); 

Answer 5

jQuery में वह चयनकर्ता नहीं है जिसे आप ढूंढ रहे हैं।

यदि आप पहले से ही jQueryUI का उपयोग कर रहे हैं, तो आप :focusable चयनकर्ता का उपयोग कर सकते हैं।

http://api.jqueryui.com/focusable-selector/

Answer 6

एक और आसान है, लेकिन पूरा, jQuery चयनकर्ता यह एक हो सकता है:

$('a[href], area[href], input, select, textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]') 
.not('[tabindex=-1], [disabled], :hidden') 

Answer 7

मैं एक अपेक्षाकृत सरल समाधान है कि सभी tabbable बच्चों देता है, उनके टैब क्रम में है, jQuery का उपयोग किए बिना।

function tabbable(el) { 
    return [].map.call(el.querySelectorAll([ 
     'input', 
     'select', 
     'a[href]', 
     'textarea', 
     'button', 
     '[tabindex]' 
    ]), function(el, i) { return { el, i } }). 
     filter(function(e) { 
      return e.el.tabIndex >= 0 && !e.el.disabled && e.el.offsetParent; }). 
     sort(function(a,b) { 
      return a.el.tabIndex === b.el.tabIndex ? a.i - b.i : (a.el.tabIndex || 9E9) - (b.el.tabIndex || 9E9); }); 
} 

IE के लिए, e.el.offsetParent तुलना में एक अलग दृश्यता जांच क्रियान्वित करने पर विचार करें। jQuery यहां आपकी मदद कर सकता है।

यदि आपको सॉर्ट किए गए तत्वों की आवश्यकता नहीं है, तो sort() पर कॉल छोड़ दें।