C'è un selettore jQuery per ottenere tutti gli elementi che possono ottenere lo stato attivo?

Question

This answer indica quali elementi HTML possono ricevere lo stato attivo. C'è un selettore jQuery che corrisponde esattamente a questi elementi?

Per ora sto usando solo $('input,select,textarea,a'), ma mi chiedo se c'è qualcosa di più preciso.

Answer 1

Si potrebbe verificare la presenza di elementi che hanno la funzione di focus():

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

Modifica Pensando un po 'di più, sarebbe probabilmente ha senso avere *:visible piuttosto che solo * come selettore per la maggior parte delle applicazioni di Questo.

Answer 2

Dal other SO answer referred to by the OP:

i browser di oggi definiamo messa a fuoco() su HTMLElement, ...

Quindi, questo significa che il test per focus come membro del l'elemento è non efficace , perché tutti gli elementi lo avranno, indipendentemente dal fatto che accetti effettivamente lo stato attivo o meno.

... ma un elemento non sarà effettivamente prendere fuoco se non è uno dei seguenti:

• HTMLAnchorElement/HTMLAreaElement con una href * HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement ma non con disabled (IE ti dà effettivamente un errore se lo provi), e gli upload di file hanno un comportamento insolito per motivi di sicurezza
• HTMLIFrameElement (sebbene la messa a fuoco non faccia nulla di utile). Anche altri elementi di inclusione, forse, non li ho testati tutti.
• Qualsiasi elemento con un tabindex

Quindi, che dire di nominare tutti coloro che in modo esplicito in un jQuery Selector?

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

---

Update # 1:

I updated your jsFiddle here. Sembra funzionare.

Ho anche aggiunto elementi con l'attributo contenteditable all'elenco precedente.

---

Update # 2:

Come @ jfriend00 ha sottolineato, "a seconda dell'uso, uno potrebbe voler filtrare gli elementi che non sono visibili". Per fare ciò, è sufficiente applicare .filter(':visible') all'insieme generato dal selettore precedente.

---

Update # 3:

Come Xavin pointed out: jQuery UI ora ha un selettore, :focusable, che svolge questa funzione. Se stai già utilizzando l'interfaccia utente di jQuery, questa potrebbe essere la soluzione. In caso contrario, è possibile che si desideri check out how jQuery UI does it. In ogni caso, la descrizione nella pagina di jQuery UI per :focusable è utile:

Elementi del seguente tipo sono attivabile se non sono disabilitati: ingresso, selezionare, textarea, pulsante, e l'oggetto. Le ancore sono focalizzabili se hanno un attributo href o tabindex. gli elementi dell'area sono selezionabili se si trovano all'interno di una mappa denominata, hanno un attributo href e c'è un'immagine visibile utilizzando la mappa. Tutti gli altri elementi sono focalizzabili esclusivamente in base all'attributo e alla visibilità del tabindex.

Così, il selettore ho proposto sopra è vicino, ma non riesce a tenere conto di alcune sfumature.

Ecco la funzione strappata dall'interfaccia utente di jQuery, con piccoli adattamenti per renderla autonoma. (Gli adattamenti sono testati, ma dovrebbe funzionare):

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; 
    } 
} 

Nota: la funzione di cui sopra dipende ancora jQuery, ma non dovrebbe richiedere jQuery UI.

Answer 3

Un test generale per sapere se un elemento supporta un particolare tipo di listener è vedere se ha una proprietà correlata, ad es. per verificare il supporto per la messa a fuoco caso, l'utilizzo:

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

Tuttavia, ci sono alcune eccezioni. Vedere le risposte a How do you programmatically determine to which events an HTML object can listen for?.

Answer 4

Invece di ottenere un elenco di elementi attivabili, è possibile provare a impostare un gestore di messa a fuoco sull'elemento body che acquisisce gli eventi di messa a fuoco.

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

Answer 5

In jQuery non esiste il selettore che stai cercando.

Se si sta già utilizzando jQueryUI, è possibile utilizzare il selettore :focusable.

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

Answer 6

Un altro semplice, ma completo, selettore jQuery potrebbe essere questa:

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

Answer 7

Ho una soluzione relativamente semplice che restituisce tutti i bambini tabbable, nel loro ordine di tabulazione, senza l'utilizzo di 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); }); 
} 

Per IE, considerare l'implementazione di un controllo di visibilità diverso rispetto a e.el.offsetParent. jQuery può aiutarti qui.

Se non sono necessari gli elementi ordinati, lasciare la chiamata a sort().