Sto cercando un elenco definitivo di elementi HTML a cui è consentito focalizzarsi, ovvero quali elementi verranno messi a fuoco quando viene richiamato focus()?Quali elementi HTML possono ricevere lo stato attivo?
Sto scrivendo un'estensione jQuery che funziona su elementi che possono essere messi a fuoco. Spero che la risposta a questa domanda mi consenta di essere specifico sugli elementi che ho scelto.
Non esiste un elenco definito, è compito del browser. L'unico standard che abbiamo è DOM Level 2 HTML, in base al quale gli unici elementi che hanno un metodo focus() sono HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement e HTMLAnchorElement. Questo in particolare omette HTMLButtonElement e HTMLAreaElement. browser
di oggi definiscono focus() su HTMLElement, ma un elemento non sarà effettivamente prendere fuoco se non è uno dei seguenti:
disabled (IE ti dà effettivamente un errore se ci provi), e i caricamenti di file hanno un comportamento insolito per ragioni di sicurezzatabindex... a meno che il tabindex è -1, il che rende impossibile mettere a fuoco.
È probabile che vi siano altre sottili eccezioni e aggiunte a questo comportamento a seconda del browser.
Qui ho un CSS selettore sulla base di bobince s' answer per selezionare qualsiasi elemento attivabile HTML:
a[href]:not([tabindex='-1']),
area[href]:not([tabindex='-1']),
input:not([disabled]):not([tabindex='-1']),
select:not([disabled]):not([tabindex='-1']),
textarea:not([disabled]):not([tabindex='-1']),
button:not([disabled]):not([tabindex='-1']),
iframe:not([tabindex='-1']),
[tabindex]:not([tabindex='-1']),
[contentEditable=true]:not([tabindex='-1'])
{
/* your CSS for focusable elements goes here */
}
o un po' più bello in SASS:
a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
[tabindex],
[contentEditable=true]
{
&:not([tabindex='-1'])
{
/* your SCSS for focusable elements goes here */
}
}
ho aggiunto era una risposta, perché era quello che stavo cercando, quando Google mi ha reindirizzato a questa domanda StackOverflow.
EDIT: C'è un altro selettore, che è attivabile:
[contentEditable=true]
Tuttavia, questo è usato molto raramente.
@TWiStErRob - il tuo selettore non ha come target gli stessi elementi dei selettori di @ ReeCube, perché il tuo non include elementi che non hanno un tabindex impostato in modo esplicito. Ad esempio, "Bar" è certamente focalizzabile perché è un elemento 'a' che ha un attributo' href'. Ma il tuo selezionatore non lo include. – jbyrd
@jbyrd era solo una richiesta di modifica basata sulla dichiarazione di bobince: "... a meno che il tabindex non sia -1, il che rende impossibile la messa a fuoco.", Non è mai stato supposto sostituire la risposta di ReeCube; guarda la cronologia delle modifiche. – TWiStErRob
SASS (o CSS) è un modulo adatto per fornire una risposta rigorosa alla domanda precedente (in caso di incoerenze del browser). –
Il: selettore di messa a fuoco è consentito su elementi che accettano eventi di tastiera o altri input dell'utente.
": focus" significa che l'elemento è attualmente focalizzato, non che è focalizzabile – jwebb
$focusable:
'a[href]',
'area[href]',
'button',
'details',
'input',
'iframe',
'select',
'textarea',
// these are actually case sensitive but i'm not listing out all the possible variants
'[contentEditable=""]',
'[contentEditable="true"]',
'[contentEditable="TRUE"]',
'[tabindex]:not([tabindex^="-"])',
':not([disabled])';
Sto creando una lista di tutti gli elementi SCSS focusable e ho pensato che questo potrebbe aiutare qualcuno a causa di rango Google di questa domanda.
Un paio di cose da notare:
:not([tabindex="-1"])-:not([tabindex^="-"]) perché è perfettamente plausibile per generare -2 in qualche modo. Meglio prevenire che curare, giusto?:not([tabindex^="-"]) a tutti gli altri selettori di messa a fuoco è completamente inutile. Quando si utilizza [tabindex]:not([tabindex^="-"]) include già tutti gli elementi che si annullerebbero con :not!:not([disabled]) perché gli elementi disattivati possono mai essere selezionabili. Quindi, ancora una volta è inutile aggiungerlo a ogni singolo elemento.La libreria accessibilità ally.js fornisce una lista non ufficiale, prova a base di qui:
https://allyjs.io/data-tables/focusable.html
(NB: la loro pagina non dice quanto spesso sono stati eseguiti i test.)
Qualsiasi idea come ottenere tutto questo con jQuery? Vedi anche http://stackoverflow.com/questions/7668525/is-there-a-jquery-selector-to-get-all-elements-that-can-get-focus – ripper234
Ho trovato alcuni risultati interessanti: http: // jsfiddle.net/B7gn6/ mi suggerisce che l'attributo "tabindex" non è sufficiente per funzionare in Chrome almeno .. –
@jon: quegli elementi tabindex effettivamente accettano l'attivazione, tuttavia, se provi a fare clic su di essi. Il test '.is (': focus')' non è affidabile - jQuery implementa il proprio test per ': focus' su Chrome, che è quello che stai testando qui. Quel codice jQuery è inaffidabile/buggato ('~ tabIndex' ..?!) Non funzionerà ...) – bobince